Vue框架自学笔记（二）——数据与方法

最新推荐文章于 2024-04-27 12:02:33 发布

--流星。

最新推荐文章于 2024-04-27 12:02:33 发布

阅读量145

点赞数

分类专栏： Spring实战文章标签： vue.js ecmascript

本文链接：https://blog.csdn.net/weixin_45974176/article/details/120974248

版权

Spring实战专栏收录该内容

52 篇文章 14 订阅

订阅专栏

本文详细阐述了Vue实例中如何通过data属性创建响应式数据，当数据变动时视图如何自动更新，并强调了Object.freeze对响应式的影响。此外，介绍了Vue实例的响应式特性及实例方法如$watch的应用。

摘要由CSDN通过智能技术生成

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。
当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

当这些数据改变时，视图会进行重渲染。
值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。
也就是说如果你添加一个新的 property，将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个 property，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。

	//注意：顺序不可调换
    <div id="app">
        <p>{{foo}}</p>
        <!-- 这里的 `foo` 不会更新！ -->
        <button @click="foo = 'baz'">Change it</button>
    </div>
    <script>
        var obj = {
            foo: 'bar'
        }
        Object.freeze(obj)
        new Vue({
            el: '#app',
            data: obj
        })
    </script>

除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。例如：

    <script>
        var data = {
            a: 1
        }
        var vm = new Vue({
            el: '#example',
            data: data
        })

        vm.$data === data // => true
        vm.$el === document.getElementById('example') // => true

        // $watch 是一个实例方法
        vm.$watch('a', function(newValue, oldValue) {
            // 这个回调将在 `vm.a` 改变后调用
        })
    </script>