computed属性和watch属性的区别之一【watch的基本用法】

来源：互联网发布：java facet 是什么编辑：程序博客网时间：2024/05/21 18:45
<body>    <div id = 'app'>        <div>            <div>                <h3>{{title}}</h3>            </div>            <div>                <h5>{{watch_string}}</h5>                <div>                    <input type="text" v-model="mystring"/>                </div>                <div>                    <p>改变前的值：{{mystring_oldValue}}</p>                    <p>改变后的值：{{mystring_currentValue}}</p>                </div>            </div>            <hr>            <div>                <h5>{{watch_function}}</h5>                <div>                    <p><input type="text" v-model="mystring2"/></p>                </div>                <div>                    <p>改变前的值：{{mystring2_oldValue}}</p>                    <p>改变后的值：{{mystring2_currentValue}}</p>                </div>            </div>            <hr>            <div>                <h5>{{watch_object}}</h5>                <div>                    <!--                        当单观察数据myobject为对象时，如果键值发生变化，                        为了监听到数据变化，需要添加deep:true参数                    -->                    <p><input type="text" v-model="myobject.name"/></p>                </div>                <div>                    <p>改变前的值：{{myobject_oldValue}}</p>                    <p>改变后的值：{{myobject_currentValue}}</p>                </div>            </div>            <div>                <h5>{{watch_object}}</h5>                <div>                    <!--                        当单观察数据myobject为对象时，如果键值发生变化，                        为了监听到数据变化，需要添加deep:true参数                    -->                    <p><input type="text" v-model="myobject.age"/></p>                </div>                <div>                    <p>改变前的值：{{myobject2_oldValue}}</p>                    <p>改变后的值：{{myobject2_currentValue}}</p>                </div>            </div>            <hr>            <hr>            <div>                <h5>主动调用$watch方法来进行数据监测</h5>                <div>                    <p><input type="text" v-model="scope"/></p>                </div>                <div>                    <p>改变前的值：{{scope_oldValue}}</p>                    <p>改变后的值：{{scope_currentValue}}</p>                </div>            </div>            <div></div>        </div>    </div>    <script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>    <script type="text/javascript">        var _vm = new Vue({            data : {                title : 'computed属性和watch属性的区别之一【基础】',                watch_string : '监测字符串',                watch_function : '监测方法',                watch_object : '监测对象',                mystring : '',                mystring_oldValue : '',                mystring_currentValue : '',                mystring2 : '',                mystring2_oldValue : '',                mystring2_currentValue : '',                myobject : {                    name : 'yuzhiboyouzhu',                    age : 18,                    sex : '男'                },                 myobject_oldValue : {},                 myobject_currentValue : {},                myobject2_oldValue : {},                 myobject2_currentValue : {},                scope : '',                scope_oldValue : '',                scope_currentValue : ''            },            watch : {                mystring : function (currentValue, oldValue) {                    _vm.mystring_oldValue = oldValue ;                    _vm.mystring_currentValue = currentValue ;                    console.log('当前值：', currentValue, ', 原来值：', oldValue) ;                },                /**                 *  监测值也可以为methods的方法名                 */                // mystring2 : _vm.test,        // 报错：Cannot read property 'test' of undefined                // mystring2 : '_vm.test',      // 报错：Cannot read property 'call' of undefined                mystring2 : 'test',                 myobject: {　　　　　　　　　  /**                   *                   *    注意：当观察的数据为对象或数组时，                   *    currentValue和oldValue是相等的，                   *    因为这两个形参指向的是同一个数据对象,                   *    所以页面上输出的“myobject_oldValue”和“myobject_currentValue”值都一样                   *                   */　　　　　　　　　　handler : function(currentValue, oldValue){                        _vm.myobject_oldValue = oldValue ;                        _vm.myobject_currentValue = currentValue ;　　　　　　　　　　　　console.log('当前值：', currentValue, ', 原来值：', oldValue) ;　　　　　　　　　　},　　　　　　　　　　deep:true},                // myobject.age : function(currentValue, oldValue) {    // 报错：Unexpected token .                'myobject.age' : function(currentValue, oldValue) { // 键路径必须加上引号                      _vm.myobject2_oldValue = oldValue ;                    _vm.myobject2_currentValue = currentValue ;　　　　　　　　　　console.log('当前值：', currentValue, ', 原来值：', oldValue) ;                }            },            methods : {                test : function(currentValue, oldValue) {                    _vm.mystring2_oldValue = oldValue ;                    _vm.mystring2_currentValue = currentValue ;                    console.log('当前值：', currentValue, ', 原来值：', oldValue) ;                }            }        }).$mount('#app') ;        // 主动调用$watch方法来进行数据监测        _vm.$watch('scope', function(currentValue, oldValue) {            _vm.scope_oldValue = oldValue ;            _vm.scope_currentValue = currentValue ;        }) ;    </script></body>
阅读全文
0 0