Vue3学习记录之computed and watch

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事件