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. FZU 2122 又见LKity【字符串/正难则反/KMP/把一个字符串中某个部分替换为另一个部分】

    嗨!大家好,在TempleRun中大家都认识我了吧.我是又笨又穷的猫猫LKity.很高兴这次又与各位FZU的ACMer见面了.最近见到FZU的各位ACMer都在刻苦地集训,整天在日光浴中闲得发慌的我压 ...

  2. 串口VMIN VTIME 详解

    原文地址: 以前跟着做过VxWorks的开发,主要通信方式是串口,因为底层BSP包已经做好了,串口通信非常简单.后来接触Linux,在一块OK6410上跑Linux串口通信,才发现原来天真的以为甚是简 ...

  3. Android gradle 相关配置

    有时候我们需要重命名输出apk文件名,在Android studio 3.0以前我们是这样写的: applicationVariants.all { variant -> variant.out ...

  4. Exchange 2013 Database Move to New Partition

    建议不要删除默认数据库,可以通过修改默认数据库名称.路径等实现您的需求. 客戶:The HK Anti-Cancer Society. 要求:遷移數據庫(01)到新分區,實際是遷移成為數據庫(05)  ...

  5. 第十六周 项目三-max带来的冲突

    分析以下程序出现的编译错误,给出解决的方案. #include<iostream> using namespace std; //定义函数模板 template<class T> ...

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

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

  7. kubernetes调度之资源耗尽处理配置

    系列目录 本篇将介绍如何使用kubelet处理资源耗尽的情况 当可用的计算机资源非常低的时候,kubelet仍然要保证节点的稳定性.当处理不可压缩的计算机资源(比如内存或磁盘空间)时,这尤其重要,当这 ...

  8. 深度解析开发项目之 02 - 使用VTMagic实现左右滑动的列表页

    深度解析开发项目之 02 - 使用VTMagic实现左右滑动的列表页 实现效果: 01 - 导入头文件 02 - 遵守代理协议 03 - 声明控制器的属性 04 - 设置声明属性的frame 05 - ...

  9. vim 插件: ctrlp.vim

    vim-scripts 里可以搜到这个插件. 安装好了之后,在 vim 的 normal 模式之下按 Ctrl+P 组合键即可弹出搜索窗口. * <f5> 更新目录缓存. * <c- ...

  10. vue 表单输入与绑定 v-model

    vue使用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.下面我们通过示例先了解下基本用法: &l ...