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. GDI+ ColorMatrix的完全揭秘

    无论是用何种语言,只要使用过Windows的GDI+的人对ColorMatrix都不陌生,我的BLOG文章中也多次提到过,并在<GDI+ for VCL基础 -- 颜色调整矩阵ColorMatr ...

  2. C#制作、打包、签名、发布Activex全过程【转】

    http://www.cnblogs.com/still-windows7/p/3148623.html 一.前言 最近有这样一个需求,需要在网页上面启动客户端的软件,软件之间的通信.调用,单单依靠H ...

  3. Python3.2官方文档翻译--作用域和命名空间实例

    6.2.1 作用域和命名空间实例 以下的实例主要用来示范怎样引用不同的作用域和命名空间,keywordglobal和nonlocalru怎样影响变量绑定. 实例执行结果是: After local a ...

  4. Ural 2018The Debut Album（DP）

    题目地址:Ural 2018 简单DP.用滚动数组. 代码例如以下: #include <iostream> #include <cstdio> #include <st ...

  5. XPath可以快速定位到Xml中的节点或者属性。XPath语法很简单，但是强大够用，它也是使用xslt的基础知识。

    示例Xml: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <?xml versio ...

  6. 广告制胜无它，顺应人性尔——leo鉴书63

    近期看了几本怎样写文案的书.对广告有了些兴趣.查了下相关销量排行,位置比較高的是本叫<科学的广告+我的广告生涯>的书,是同一作者(Claude C. Hopkins)两本书的合集.前者是他 ...

  7. 微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo

    微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo 前言 做好了项目之后,在各种浏览器里面測试,都没有问题.非常高兴,交付后端使用.然而发如今微信自带浏览器里面,却是出现 ...

  8. sqlite数据库改动及升级

    今天是上班的第二天.听说我近期的任务就是改bug.唉,权当学习了,遇到的一些问题都记录下来. sqlite数据库是android中很经常使用的数据库.今天帮别人改bug,遇到一些问题记录下来. 1.改 ...

  9. request 发送多层字典

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

  10. Ubuntu下安装libsvm

    在安装LibSVM前需要先装 python 和 gnuplot linux 一般都自带了python2.7,所以python的安装不再赘述 在 ubuntu 下安装 gnuplot 不能直接 sudo ...