watch 与 computed用法区别

1、watch是监听响应数据变化

html代码如下

<div id="app">
    <input v-model="name"/>
    <p>{{Cname}}</p>
</div>

js代码如下

var app = new Vue({
    el:"#app",
    data:{
        name:"jwl",
        Cname:"jwl"
    }
})
        
//当name的值发生改变的时候，就触发
app.$watch('name', function(newValue, oldValue) {
     this.Cname = newValue;
     alert("旧"+oldValue);
     alert("新"+newValue);
})

2、computed计算属性

只有在它的相关依赖发生改变时才会重新求值

html代码如下

<div id="app">
    <input v-model="oldd" />
    <p>1{{newsss}}</p>
</div>

js代码如下

var app = new Vue({
    el:"#app",
    data:{
        oldd:"xsxs"
        /*谨记！！！！newsss不允许在这里出现了*/
    },
    computed: {
         newsss: function() {
             return this.oldd + "（新的）";
         }
   }
})