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. (1)Unity3d界面、入门

    项目视图 层级视图 属性视图 场景视图 游戏视图 调整u3d整体界面布局 1.查看和移动视图 快捷键Q 2.沿轴方向位移 快捷键W 3.沿轴向旋转 快捷键E 4.沿轴向缩放 快捷键R 5.自由调节小大 ...

  2. 一分钟学会Spring Boot多环境配置切换

    一. 问题由来 开发环境.测试环境.生产环境--------我们的软件在不同的环境中,系统参数和配置可能会不一样,比如数据源配置.日志文件配置.以及一些软件运行过程中的基本配置,那每次我们将软件部署到 ...

  3. Extjs Ext.grid.column.Column 自适应内容

    var griddb = Ext.ComponentQuery.query("Ali_DeliveryAuthorityList"); griddb = griddb[griddb ...

  4. mac下 JMeter 4.0 进行多用户接口压力测试

    1.最近在做公司的内部系统,需要进行多用户压力测试,于是上网在官网下载了Jmeter 压缩包,并放在指定的目录解压,打开解压后文件夹到bin目录下: 执行sh jmeter  Jmeter就启动起来了 ...

  5. js/jq仿window文件夹框选操作插件

    0.先给大家看看效果: 1.创建一个index.html文件 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 ...

  6. 在Dev GridControl中添加颜色可变的ProgressBar z

    在使用DevExpress,GridControl自带的ProgressBarControl的时候 由于无法通过BackColor/ForeColor来改变进度条的颜色所以很多特效是实现不了的.如下面 ...

  7. DevExpress右键菜单使用 z

    添加BarManager和popupMenu组建: 设置popupMenu组件的Manager属性: 右键点击popupMenu主键,点击Customize选项添加菜单:    然后便可添加到鼠标事件 ...

  8. dll的使用

    2016-12-11   23:02:24 一:生成DLL 1:创建DLL工程 文件->新建->项目->visual c++->win32->win32控制台应用程序(w ...

  9. Gvim 和 Opencv编译

    好奇看了一下Gvim编译器:在官网上也有介绍,github上有源码,安装在电脑上,感觉需求不大,记那些命令也太多了.然后编译opencv过程中cmake成功了,但是VS下编译报了很多错,准备不搞这些了 ...

  10. nexus启动报错-----&gt;错误 1067: 进程意外终止。

    1.今天启动nexus报错: 2.错误信息 错误 1067: 进程意外终止. 3.检查发现我之前把jdk升级了. 然而nexus之前指定的jdk将不再生效. 4.解决的方法 找到nexus安装文件夹 ...