《浅析Vue》之computed 和 watch区别

·  阅读 207

computed

computed是计算属性,是用来计算一个值的,这个值在调用时不需要加括号,可以直接当属性使用,同时computed会根据依赖的数据显示新的计算结果会被缓存。如果一个数据依赖于其他数据,那么把这个数据设计为computed。

实例:

<div id="example"> 
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
复制代码
var vm = new Vue({
   el: '#example', 
   data: { 
     message: 'Hello' 
   }, 
   computed: { 
     // 计算属性的 getter 
     reversedMessage: function () { 
     // `this` 指向 vm 实例 
     return this.message.split('').reverse().join('') 
    } 
  } 
})
复制代码

结果:

Original message: "Hello"

Computed reversed message: "olleH"

watch

watch是监听属性,当数据(属性)变化时,就执行一个函数,其特点是immediatedeep如果需要在某个数据变化时做一些事情,使用watch。

  • 语法1
watch:{
    obj1:function(value,oldValue),      //function的参数是 Vue 传的
  obj2(){},     //ES6缩写
  obj3:[f1,f2],     //两个函数,依次执行f1和f2
  obj4:'methodName',        //methods里面找对应名字的函数
  obj5:{handler:fn,deep:true,immediate:true},  //{执行函数,是否deep看,第一次是否运行}
  obj6:'object.a':function(){}    //function有的版本可以省去
}
复制代码
  • 语法2
vm.$watch('xxx',fn,{deep:...,immediate:...}) //'xxx'可以改为一个返回字符串的函数
复制代码

watch中this

watch中不要用箭头函数

const vm = new Vue({
    data: ...
    watch:{
        n:function(){
            this ===vm
        }
    }
})
复制代码

这里的this代表全局变量,new Vue是函数的调用

immediate

Vue 默认第一次渲染的时候不执行watch。但 Vue 提供了 immediate 方法用于表示在第一次渲染的时候是否要执行 watch。

immediate:true/false  // 默认false不执行
复制代码

deep

Vue 的数据中,简单类型看值,复杂类型(对象)看地址;Vue 提供了 deep 方法用于判断是否要看这个对象里面的属性的变化。

deep:true/false // 默认false 不深究
复制代码
分类:
前端
标签:
分类:
前端
标签: