Vue学习(8)监视器

最新推荐文章于 2025-03-31 16:06:23 发布

ssqsssq

最新推荐文章于 2025-03-31 16:06:23 发布

阅读量350

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/weixin_43778744/article/details/105250531

版权

Vue 专栏收录该内容

10 篇文章

订阅专栏

watch

简单监视单个属性简单数据结构

深度监视复杂属性复杂数据结构

<!--
 * @Author: your name
 * @Date: 2020-04-01 16:50:28
 * @LastEditTime: 2020-04-01 17:11:06
 * @LastEditors: Please set LastEditors
 * @Description: 监听（内存地址监听）
 * @FilePath: \x\11.html
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg"/>
        <button @click="stus[0].name='rose'">change</button>
        <h3>{{ msg }}</h3>
        <h4>{{ stus[0].name }}</h4>
    </div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        // 总结：watch监听单个属性，基本数据类型，简单监视
        // 复杂的数据类型，深度监视
        new Vue({
            el: "#app",
            data() {
                return {
                    msg: '',
                    stus: [{name: 'jack'}]
                }
            },
            watch: {
                msg: function(newV, oldV) {
                    console.log(newV, oldV);
                    if (newV == 'k') {
                        console.log('lai');
                    }
                },
                // 监听复杂数据类型，深度监视
                stus: {
                    deep: true, // 深度监视
                    handler: function(newV, oldV) {
                        console.log(newV[0].name);
                    }
                }
            },
        })
    </script>
</body>
</html>