美文网首页
watch 与 computed用法区别

watch 与 computed用法区别

作者: 皮卡乒乓 | 来源:发表于2018-04-26 10:30 被阅读0次

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 + "(新的)";
         }
   }
})

相关文章

网友评论

      本文标题:watch 与 computed用法区别

      本文链接:https://www.haomeiwen.com/subject/nbezkftx.html