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. 洛谷——P2196 挖地雷

    题目背景 NOIp1996提高组第三题 题目描述 在一个地图上有N个地窖(N<=20),每个地窖中埋有一定数量的地雷.同时,给出地窖之间的连接路径.当地窖及其连接的数据给出之后,某人可以从任一处 ...

  2. AnsiString类型定义的时候可以直接指定代码页，比如950繁体字，936日文

    procedure TForm3.FormCreate(Sender: TObject); type AnsiStringForPage = type AnsiString(950);//代码页 va ...

  3. php curl xml传输和转换

    <?php /** * API * User: sgfoot * Date: 2017/3/20 * Time: 18:05 */ class apiCurl { private $config ...

  4. Android --修改arr文件

    1. 改为zip文件 2. 修改 3. 改后缀

  5. SilverLight：基础控件使用（3）-DataGrid控件

    ylbtech-SilverLight-Basic-Control:基础控件使用(3)-DataGrid控件 DataGrid控件-后台绑定 自动生成表列 不自动生成表列 1.A,返回顶部Person ...

  6. react 调用 function 的写法 及 解决 react onClick 方法自动执行

    1.react 调用方法的写法 (1)方式一 onClick={this.getFetchData.bind(this,item.id)} (2)方式二 getFetchData(e){ this.s ...

  7. STL之set具体解释（二）

    首先来看看set集合容器: set集合容器实现了红黑树的平衡二叉树数据结构.在插入元素时它会自己主动调整二叉树的排列,把该元素放到适当的位置,而且 保证左右子树平衡.平衡二叉检索树採用中序遍历算法. ...

  8. python--文件操作补充

    文件操作补充 f = open('file',encoding='utf-8')其中打开时不写模式默认只读f是文件句柄,文件操作符,不能使数字相当于content = f.read()content是 ...

  9. Nginx详细的安装教程（linux）

    转:https://blog.csdn.net/u013641234/article/details/73838472 Nginx作为一个web服务器,目前使用最多的就利用其负载均衡,本篇着重讲解的是 ...

  10. SDP, RTP, RTCP, RTSP, RTMP 名词解释

    读维基百科里的词条,记录的一点笔记. SDP 会话描述协议 Session Description Protocol 严格来说 SDP 不是一种协议,而是一种格式约定,用于描述流媒体的参数.如协商媒体 ...