computed：计算属性，是为了模板中的表达式简介，易维护，符合用于简单的设计初衷
代码来说明：
<p id="app">
{{ myname.substring(0,1).toUpperCase() + myname.substring(1) }}
</p>
运算过于复杂，冗长，且不好维护，因此我们对于复杂的运算应该计算属性的方式来书写
代码来说明：
<body>
<div id="app">
{{ changewords }} // 渲染 不用写()
</div>
</body>
<script>
varvm = newVue({
el: "#app",
data:{},
// 计算属性
computed:{
changewords(){
returnthis.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
}
}
})
</script>
总结：
- 变量不在data中定义，而是定义在computed中，写法跟写方法一样，有返回值。函数名直接在页面模板中渲染，不加小括号
- 根据传入的变量的变化，进行结果的更新
- 计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化，它调用的就是上一次计算缓存的数据，因此提高了程序的性能。而methods中每调用一次就会重新计算一次，为了进行不必要的资源消耗，选择用计算属性。
计算属性模糊查询的例子：
<body>
<div id="app">
<input type="text"v-model="mytext">
<ul>
<li v-for="data in datalistcom":key="data">
{{ data }}
</li>
</ul>
</div>
</body>
<script>
varvm = newVue({
el: "#app",
data:{
datalist:["aaa","bbb","ccc","ddd","aa","a","cc","dd"],
mytext:''
},
computed:{
datalistcom(){
returnthis.datalist.filter(item=>item.indexOf(this.mytext)>-1)
}
}
})
</script>
watch：监听属性，上面说到计算属性的时候，初始化的时候就可以被监听到并且计算但是watch发生改变的时候才会触发。
当你有一些数据需要随着其他数据变动而变动时，或者当需要在数据变化时执行异步活开销较大的操作时，你可以使用watch
代码来说明：
<body>
<div id="app">
<p>单价：<input type="text"v-model="price"></p>
<p>数量：<input type="text"v-model="number"></p>
<p>计算金额：{{sum}}</p>
</div>
</body>
<script>
varvm = newVue({
el:"#app",
data:{
price:100,
number:1,
sum:0
},
//监听某一个值或者状态发生变化 变化就会触发watch
watch:{
// 监听的参数的名字要一致
price(){
console.log(this.price)
if(this.price*this.number < 1000 && this.price*this.number > 0){
this.sum = this.price*this.number + 100
}else{
this.sum = this.price*this.number
}
},
number(){
console.log(this.price)
if(this.price*this.number < 1000 && this.price*this.number > 0){
this.sum = this.price*this.number + 100
}else{
this.sum = this.price*this.number
}
}
}
})
</script>
两者区别：
- 计算属性变量在computed中定义，属性监听在data中定义
- 计算属性是声明式的描述一个值依赖其他值，依赖的值改变后重新计算结果更新dom。属性监听的是定义的变量，当定义的值发生变化时，执行相对应的函数