十秒看懂computed和watch的区别 （vue的简单计算和复杂监听）

1，计算属性  computed

 computed 计算属性 ：通过原本属性进行计算 产生一个新的属性 
  计算属性 不写在data里面 写在computed中

重点：它是由原本的属性（data中的数据）产生的新的属性

下方是部分代码演示：（自行引入vue）

    <div id="app">
        <p>
            姓：<input type="text" v-model="firstName">
        p>
        <p>
            名字：<input type="text"  v-model="lsatName">
        p>
        {{allName}}
    div>
    <script>
        //通过 firstName和lastName计算一个新的属性
        //当firstName或者lastName实时更新
        //computed 计算属性 ：通过原本属性进行计算 产生一个新的属性******
        // 计算属性 不写在data里面 写在computed中
        let vm=new Vue({
            el:"#app",
            data:{
                firstName:"",
                lsatName:""
            },
            computed:{
                allName(){
                    return this.firstName+this.lsatName
                }
            }
        })
    script>
body>

2，watch 监听

watch 不产生新的属性，只是在原有的内容进行更改 ，通过监听某个数据的变化改变其他数据，实现复杂操作——

watch 用于复杂逻辑 ，搜索！！ input框 值发送变化时，AJax请求 ，当数据变化 实现功能较为复杂时，使用watch,watch不是只对属性服务，可以写多种操作

    <div id="app">
        <p>
            当前温度：<button @click="reduce()">-button>{{temperature}} <button @click="add()">+button>
        p>
        <p>
            建议穿衣指数：{{dress}}
        p>
    div>
    <script>
        // watch选项：监听选项 对vue中某一个数据进行监听，当数据发生变化时，执行对应函数
       
        // 20以上 短袖
        //10-20 长袖
        //0-10 外套
        //0    棉衣
        let vm=new Vue({
            el:"#app",
            data:{
                temperature:20,
                dress:"半袖"
            },
            methods: {
                reduce(){
                    this.temperature--
                },
                add(){
                    this.temperature++
                }
            },
            watch:{
                temperature(){
                    console.log(1)
                    if(this.temperature<20){
                        this.dress="长袖"
                    }
                }
            }
        })
    script>
body>

通过监听温度的变化 ，自动改变穿衣指数，监听的是温度，而改变的是穿衣指数，也可以同时改变多个属性 ，可听一变则万变 

当然了这个逻辑简单用computed也可以做 

 watch和计算属性区别：
         1.watch 不产生新的属性，只是在原有的内容进行更改
        computed 利用原本属性，产生一个新的属性
       2. computed 用于基于原有数据，可以直接计算出来的内容 ，计算属性中通常写的都是简单的逻辑 一些基本的计算和对应的判定
          watch 用于复杂逻辑 ，搜索！！ input框 值发送变化时，AJax请求 ，当数据变化 实现功能较为复杂时，使用watch,watch不是只对属性服务，可以写多种操作

是不是一眼就看懂了，别急着走，点个赞吧！