学习-Vue2-Vue实例-数据与方法-数据的响应式-优快云博客

本文链接：https://blog.youkuaiyun.com/machine_vision123/article/details/129253462

文章讲述了在Vue框架中，实例创建时data对象的property会被加入到响应式系统。当这些property的值改变时，视图会自动更新。只有实例创建时存在的property才是响应式的，之后添加的不会触发响应式更新。示例展示了vm和data对象之间的关系以及数据变化对视图的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当一个实例被创建时，它将data对象中的所有的property加入到Vue的响应式系统中。 当这些property的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于data中的property才是响应式的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <div id="app">
        {{ message }}
    </div> -->

    <!-- <div id="app1">
        <span :title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
    </div> -->
    <div id="app2">
        {{ a }}
        {{ b }}
    </div>
</body>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    // 注意我们不再和HTML直接交互了。一个Vue应用会将其挂载到一个DOM元素上(对于这个例子是#app)然后对其进行完全控制。
    // 那个HTML是我们的入口，但其余都会发生在新创建的Vue实例内部。
    // var app = new Vue({
    //     el: '#app',
    //     data: {
    //         message: 'Hello Vue！'
    //     }
    // })

    // var app1 = new Vue({
    //     el: '#app1',
    //     data: {
    //         message: '页面加载于' + new Date().toLocaleDateString()
    //     }
    // })

    /**
     * 当一个实例被创建时，它将data对象中的所有的property加入到Vue的响应式系统中。
     * 当这些property的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
     * 
     * 当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于data
     * 中的property才是响应式的。
    */
    var data = {a: 1}
    var vm = new Vue({
        el: '#app2',
        data: data
    })
    console.log(vm.a == data.a) // true
    console.log(vm.a) // 1
    vm.a = 2
    console.log(data.a) // 2
    data.a = 3
    console.log(vm.a) // 3
    vm.b = 15
    console.log(vm.b) // 15
    data.b = 16
    console.log(data.b) // 16
</script>
</html>

视图与控制台打印结果：