vue学习笔记4--实例和方法

时间：2016-09-01 22:42:53 阅读：135 评论：0 收藏：0 [点我收藏+]

标签：

github地址:https://github.com/lily1010/vue_learn/tree/master/lesson03

一实例

每个 Vue 实例都会代理其 data 对象里所有的属性,改变data,vue实例同时改变,当然改变vue实例,data也同时改变,即 vue实例<=>data

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue实例与方法</title>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    <body>
        <div class="test">
            {{a}}
        </div>
        <script type="text/javascript">
            var data = {
                a: 1
            }
            var myVue = new Vue({
                el: ".test",
                data: data
            })
        </script>
    </body>
</html>

在console控制台操作是:(其中每种颜色框起来的代码都是一组改变)

技术分享

二实例数据如何被追踪变化

注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新.那么就要讲下实例数据如何被追踪变化

把一个普通对象传给 Vue 实例作为它的 data 选项，Vue.js 将遍历它的属性，用Object.defineProperty 将它们转为 getter/setter,在内部它们让 Vue.js 追踪依赖，在属性被访问和修改时通知变化,

举个栗子:(我们访问接口时返回的数据通常是get和set)

技术分享

那么来了解一下追踪原理:

技术分享

上图描述的是:模板中每个指令/数据绑定都有一个对应的 watcher 对象，在计算过程中它把属性记录为依赖。之后当依赖的 setter 被调用时，会触发 watcher 重新计算，也就会导致它的关联指令更新 DOM。

那么我们如果在实例化后给数据添加一个属性,由于ES5的限制,Vue.js 不能检测到对象属性的添加或删除,实际上vue的做法是初始化实例时将属性转为 getter/setter，这时已经开始了监控数据变化,所以数据是响应的,但是后来添加进去的属性就没办法转化为getter/setter.

举个栗子,还是上面那段代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue实例与方法</title>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    <body>
        <div class="test">
            {{a}}
        </div>
        <script type="text/javascript">
            var data = {
                a: 1
            }
            var myVue = new Vue({
                el: ".test",
                data: data
            })
        </script>
    </body>
</html>