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

标签：rev   http   语法   组件   watch   计算   return   自己   举例   

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
在用的时候一般就是使用计算属性进行数据返回 所以呢 就来了一个 数据设置 触发的时候进行数据的设置 不写例子了

感触：

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

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

标签：rev   http   语法   组件   watch   计算   return   自己   举例   

原文地址：https://www.cnblogs.com/tcz1018/p/12981342.html