Vue的计算属性和方法和侦听器

Posted 2020-12-06 tcz1018

Vue的计算属性和方法和侦听器

(一)计算属性

首先要明白在模板语法里面可以进行简单运算 但是尽量不要会有过多逻辑不好维护 所以把操作单独列出来

//会弄的很乱是吧
<div 
  {{ message.split(‘‘).reverse().join(‘‘) }}
</div>

所以把操作方放在 computed里面

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

  data(){
  	return{
  	 message: ‘Hello‘
  	}
  },
  computed: {
    // 计算属性的 getter 写成一个函数进行操作 进行返回值
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split(‘‘).reverse().join(‘‘)
    }
  }

(二）方法 methods
方法区分于计算属性
例如：

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split(‘‘).reverse().join(‘‘)
  }
}

划重点 区别在

计算属性是基于它们的响应式依赖进行缓存的。只在相关的数据响应式依赖发生改变时它们才会重新求值。只要上述例子里面的message没有发生改变 就不会在执行
源码中的 Date.now() 不是响应式依赖
但是methods就不了 只要触发重新渲染就会再次执行

再划重点

计算属性是有缓存的，执行一遍之后，只要有数据不变，他就不会刷新这是他的特点 就是像是那些很大的性能计算 就要用计算属性对吧 尴尬的是较真的我在想 既然比起来计算属性这么牛还用methods干啥啊 我又一想 你是智障吗 这是个框架 JS本就是要写方法的，只不过这个做了优化计算属性才有这个特点的啊 是的哈
(三）侦听器(侦听属性)和计算属性的区别

什么是侦听器:
就是看着你变了 我就怎么样 watch 来进行相应数据变化
举例子

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

data() {
	return{
	    question: ‘‘,
    	answer: ‘I cannot give you an answer until you ask a question!‘
	}
},
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = ‘Waiting for you to stop typing...‘
    }
  },

还是重点

这个例子只是演示了怎么是用watch 但是在官网 很形象的展示了

就是限制频率进行相应的操作 这个没有用到 用到再来补充

(四) 计算属性的stter
在用的时候一般就是使用计算属性进行数据返回 所以呢 就来了一个 数据设置 触发的时候进行数据的设置 不写例子了

感触：

一开始你自己开始学习相关的编程知识 学的不深 开始工作了 哎呀人家用框架啊 开始学框架啊 其实啊框架不就是一群人做了牛的壳子 你去按照人家的写法来写自己的项目 然后我我们就在这一点点的学 学一点懂一些 其实很多时候要是知道了框架的底层会更加的明白 就像是 计算属性里面都是使用绑定值返回值 人家就是个方法 咋不能去设置值呢是啊吧