github地址:https://github.com/manlili/vue_learn里面的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>

在控制台新添加b和c两个新属性,如下:

但是vue的作者还是想办法实现了在实例创建之后添加属性并且让它是响应的,但是不推荐,先来看一下做法:

(1)方式一:对于 Vue 实例，可以使用 $set(key, value) 实例方法

(2)方式二：对于普通数据对象，可以使用全局方法 Vue.set(object, key, value)

既然vue的作者已经提供了实例化后添加新属性并让它成为实时相应的,那为什么还不推荐使用?

(1)data 对象就像组件状态的模式（schema）。在它上面声明所有的属性让组件代码更易于理解。

(2)添加一个顶级响应属性会强制所有的 watcher 重新计算，因为它之前不存在，没有 watcher 追踪它。这么做性能通常是可以接受的，但是可以在初始化时避免。

Vue实例和方法的更多相关文章

  1. vue.js之生命周期，防止闪烁，计算属性的使用，vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  2. vue教程2-04 vue实例简单方法

    vue教程2-04 vue实例简单方法 vue实例简单方法: vm.$el -> 就是元素 vm.$data -> 就是data <!DOCTYPE html> <htm ...

  3. 在普通js文件里引入vue实例的方法

    首先是我是写了一个 Loading 插件然后 是挂在打vue.prototype 原型上的. 在main.js中use使用了这个插件. 至此vue原型是就被我挂上 $loadding方法了. 然后我想 ...

  4. Vue实例属性/方法/生命周期

    一 实例属性 var app = new Vue(); app.$el ===>返回当前挂在DOM对象. app.$data ===>返回当前实例data里面的数据 app.$option ...

  5. vue实例的方法

    1.mount挂载 vm.$mount('#app') 2.销毁 vm.$destroy() 3.刷新实例 vm.$forceUpdate() 4.更新后的操作 vm.$nextTick(functi ...

  6. 浅析vue实例的生命周期（生命周期钩子）

    “每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...

  7. ch2-vue实例(new Vue({}) 属性与方法 声明周期)

    Vue 实例1 每个Vue.js都是通过创建一个Vue的根实例启动的 var vm = new Vue({}) 2 扩展Vue构造器,用预定义选项创建可复用的组件构造器 var MyComponent ...

  8. Vue2.x源码学习笔记-Vue实例的属性和方法整理

    还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...

  9. Vue（十二）vue实例的属性和方法

    vue实例的属性和方法 1. 属性 vm.$el vm.$data vm.$options vm.$refs <!DOCTYPE html> <html lang="en& ...

随机推荐

  1. (5)html音频视频

    音频 1.互联网常用的音频格式 ogg 有损的音频压缩技术 免费的开源音频格式 它可以在相对较低的数据速率下实现比MP3更好的音质 mp3 有损的音频压缩技术 想使用MP3格式发布自己的作品,需要付给 ...

  2. IDEA连接linux服务器

    idea连接linux(完成了xshell和xftp连接linux的功能,可以直接卸载这俩了..) File->settings->Deployment左侧加号添加 选择传输类型ftp或者 ...

  3. 0.从零开始搭建spring mvc + mybatis + memcached+ dubbo\zookper的maven项目

    1.首先创建maven 项目,配置相关pom信息 2.配置spring mvc 4, 测试,提交代码 3.引入配置mybatis3,测试,提交代码 4.配置事务,测试,提交代码 5.配置memcach ...

  4. MFC改变控件颜色

    from http://www.cppblog.com/FandyM/archive/2010/07/21/120972.aspx MFC应用程序中,要改变控件的背景色可通过重载OnCtlColor( ...

  5. 两点C#的propertyGrid的使用心得【转】

    源文:http://www.cnblogs.com/bicker/p/3318934.html 最近接触C#的PropertyGrid比较多,得到了两个小心得记录一下. 第1点是关于控制Propert ...

  6. Irrlicht 3D Engine 笔记系列之 教程4 - Movement

    作者: i_dovelemon 日期: 2014 / 12 / 16 来源: CSDN 主题: Event Receiver, Animator, Framerate independent move ...

  7. 赵雅智_Android案例_刮刮乐

    实现效果 主要代码 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns ...

  8. request 发送多层字典

    a. 客户端向服务端发送多层字典的值 #客户端发送 obj = { 'data':{ "k1":"v1", "k2":"v2&qu ...

  9. Ubuntu14下Hadoop开发&lt;2&gt; 编译64位Hadoop2.4

    Hadoop官方站点仅仅提供了32位的Hadoop包.我装的是64位的系统.自然无法使用,会报错误,导致的结果是无法启动hadoop libhadoop.so.1.0.0 which might ha ...

  10. Oracle比较时间大小

    1,比较当前时间与指定时间相差分钟数:    select sysdate,  sysdate - to_date('2007-04-03 13:45:39','yyyy-mm-dd hh24:mi: ...