computed---计算的意思,在vue中的作用是将一个方法变成一个属性并且进行缓存。
意思就写在computed中的方法使用时作为一个属性,而且会缓存在电脑中,只要源文件不改变就不会改变,我们再次使用的话直接从缓存中获取即可。我们给出例子如下:目标是替换文本
<script >
export default{
data(){
return{
name:"绘梨衣",
}
},
methods:{
newname1(name){
console.log("我运行了")
return this.name = "可爱的绘梨衣";
}
},
computed:{
newname(){
return this.newname = "可爱的绘梨衣"
}
}
}
</script>
<template>
<div>
<span @click="newname1(name)" >{{name}}</span>
<span >{{name}}</span>
<span >{{name}}</span>
<hr>
<span>{{ newname }}</span>
<hr>
<span>{{ newname }}</span>
<hr>
<span>{{ newname }}</span>
</div>
</template>
意思就是 computed中的属性可以直接用在{{}}中,而方法则不行---没有想好例子怎么写
同时computed还有get和set方法--get方法只获得属性,set方法可以改变属性
watch监听属性一般用在异步刷新的时候,当值发生变化的时候会触发函数
有两个重要的属性
deep:true 深度监听,会给数组里面的每个属性进行监听,
immediate:true 会在每次初始化也就是刷新的时候进行监听
<script >
export default{
data(){
return{
name:"绘梨衣",
}
},
watch:{
name(newValue,name){
alert(name)
alert(newValue)
}
},
}
</script>
<template>
<div>
<input name="输入" v-model="name" type="text" >
</div>
</template>
请注意:要将 watch里面的函数的名字和变量的名字要一致,也就是name ---name name1----name1,这个时候,只要name的值发生改变,那么就会触发watch里面的函数进行运作。
但是如果对象是数组的话,我们就不能采用名字的方式,我们可以使用字符串的方式也就是
user:{
name:"绘梨衣"
}
<input name="输入" v-model="user.name" type="text" >
"user.name"(){
alert("sss")
}
这样在改变值的时候也可以触发watch事件