computed与watch在Vue中有什么不同-创新互联

computed与watch在Vue中有什么不同?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

成都创新互联公司长期为上1000+客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为金城江企业提供专业的网站设计制作、成都网站设计金城江网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

计算属性computed:

  • 支持缓存,只有依赖数据发生改变,才会重新进行计算

  • 不支持异步,当computed内有异步操作时无效,无法监听数据的变化

  • computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

  • 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed

  • 如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。

var vm = new Vue({
 el: '#app',
 data: {
  message: 'hello'
 },
 template: `
 
 

我是原始值: "{{ message }}"

 

我是计算属性的值: "{{ computedMessage}}"

 // computed 在 DOM 里直接使用不需要调用 
 `,  computed: {   // 计算属性的 getter   computedMessage: function () {    // `this` 指向 vm 实例    return this.message.split('').reverse().join('')   }  } })

结果:

我是原始值: "Hello"
我是计算属性的值: "olleH"

如果不使用计算属性,那么 message.split('').reverse().join('') 就会直接写到 template 里,那么在模版中放入太多声明式的逻辑会让模板本身过重,尤其当在页面中使用大量复杂的逻辑表达式处理数据时,会对页面的可维护性造成很大的影响

而且计算属性如果依赖不变的话,它就会变成缓存,computed 的值就不会重新计算

所以,如果数据要通过复杂逻辑来得出结果,那么就推荐使用计算属性

侦听属性watch

  • 不支持缓存,数据变,直接会触发相应的操作。

  • watch支持异步;监听的函数接收两个参数,第一个参数是新的值;第二个参数是输入之前的值;

  • 当一个属性发生变化时,需要执行对应的操作;一对多;

  • 监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作,函数有两个参数:

new Vue({
 data: {
  n: 0,
  obj: {
   a: "a"
  }
 },
 template: `
 
 n+1 obj.a + 'hi' obj = 新对象 
 `,  watch: {   n() {    console.log("n 变了");   },   obj:{    handler: function (val, oldVal) {     console.log("obj 变了")   },    deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调,不论其被嵌套多深   },   "obj.a":{    handler: function (val, oldVal) {     console.log("obj.a 变了")   },    immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用   }  } }).$mount("#app");

不应该使用箭头函数来定义 watcher 函数,因为箭头函数没有 this,它的 this 会继承它的父级函数,但是它的父级函数是 window,导致箭头函数的 this 指向 window,而不是 Vue 实例

  • deep 控制是否要看这个对象里面的属性变化

  • immediate 控制是否在第一次渲染是执行这个函数

vm.$watch() 的用法和 watch 回调类似

  • vm.$watch('data属性名', fn, {deep: .., immediate: ..})

vm.$watch("n", function(val, newVal){
   console.log("n 变了");
},{deep: true, immediate: true})

总结

  • 如果一个数据需要经过复杂计算就用 computed

  • 如果一个数据需要被监听并且对数据做一些操作就用 watch

关于computed与watch在Vue中有什么不同问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


分享文章:computed与watch在Vue中有什么不同-创新互联
文章转载:http://myzitong.com/article/dcojoj.html