Vue—实例成员computed和watch

Computed

一个变量依赖于多个变量

现在需要full_name这个变量以来于first_name和last_name这两个变量需要用到computed

好处：

1.相当于在computed中定义的变量值等于绑定的函数的的返回值，该变量无需再data中声明

2.在computed绑定的函数中所有的变量都会进行监听,只要写在里面就会被监听

<div id="app">
    <p>
        姓：<input type="text" v-model="first_name">
        名：<input type="text" v-model="last_name">
    </p>
    <p>
        姓名：<b>{{ full_name }}</b>
    </p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: ‘#app‘,
        data: {
            first_name:‘‘,
            last_name:‘‘,
            // full_name:‘None‘
        },
        computed:{
            full_name:function () {
                // let a =this.first_name;
                // let b =this.last_name;
                // console.log(‘尼玛‘);
                // return‘123‘
                return this.first_name+this.last_name
            }
        }
    })
</script>

watch

watch这个方法不是监听内部的,后方绑定的函数就是监听前方的变量，变量值改变，函数被调用，绑定的变量必须在data中声明

<div id="app">
    <p>姓名：<input type="text" v-model="full_name"></p>
    <p>
        姓：<b>{{first_name}}</b>
        名：<b>{{last_name}}</b>
    </p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: ‘#app‘,
        data: {
            full_name:‘‘,
            first_name:‘‘,
            last_name:‘‘
        },
        watch:{
            //1.后方绑定的函数就是监听前方的变量，变量值改变，函数被调用
            full_name:function () {
                let res = this.full_name.split(‘‘);
                this.first_name = res[0];
                this.last_name = res[1]

            }
        }
    })
</script>

原文地址：https://www.cnblogs.com/zhengyuli/p/11099000.html