vue之计算属性

一、vue计算属性--computed：

1. 依赖于data中的数据，只有相关数据变化才会重新求值；

2. 属性调用，带有缓存功能；

3. 比methods节省内存；

   <p>{{text}}</p>
   
   computed:{
       text(){console.log('a')}
   }

   二、vue计算属性--methods

函数调用，无缓存功能；

<p>{{text()}}</p>

methods:{ 
    text(){consloe.log('a')}
}

三、vue计算属性--updated:

只有在data里面提前设置好变量，变量改变并且要在页面中重新渲染完成之后，才会进入updated方法；

四、setter/set、getter/get：在computed中使用，get默认使用；

sets：<input type="text" name="" id="" v-model="sets">

a：<input type="text" name id v-model="a">

b：<input type="text" name id v-model="b">

data() {

return {

a: "a",

b: "b"

};

},

computed: {

sets: {

get(e) {

console.log("gets");

return this.a + ' ' + this.b

},

set() {

console.log("setss");

return this.a + ' ' + this.b

}

}

},

updated(e) {

console.log("upds");

}

上面代码，在sets中输入数值调用computed里的set函数，输出setss;

在a中输入，调用computed中的get和updated，输出gets和upds；

在b中输入，调用computed中的get和updated，输出gets和upds；

五、created\mounted：

created:在模板渲染成html前完成，通常是初始化某些属性值，然后渲染成视图；

mounted:在模板渲染成html后完成，通常是页面初始化完成后，再对html的dom节点进行需要的操作；

mounted:function(){
console.log('b')
},
created:function(){
console.log('a')
},

上面这段代码会先输出a，后输出b