（原网址：http://blog.csdn.net/stronger_lxs/article/details/51321470）
1、响应式属性和方法
每个 Vue 实例都会代理其 data 对象里所有的属性。
var data={ a:1}
var vm=new Vue({data:data})
vm.a===data.a // -> true
//设置属性也会影响到原始数据
vm.a=2
data.a // -> 2
// ... 反之亦然
data.a=3
vm.a // -> 3
即：都可以使vm.xxx这种方式获取和修改实例属性。
注意：
注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。我们将在后面详细讨论响应系统。
那么这种情况的话，可以使用VueJs的vm.$xxx的方式来修改实例属性，这同样会触发视图更新，响应式的改变。
2.生命周期钩子
生命周期钩子包括created、beforeCompile、compiled、ready、beforeDestroy、destroyed
钩子的 this 指向调用它的 Vue 实例
我们可以在钩子的方法中使用this来指代当前实例。Vuejs中没有控制器的概念，组件的自定义逻辑可以分割在这些钩子里面。
3.插值
单词插值，只有在第一次渲染时候渲染值，之后不会随实例属性值的变化而改变，如：
<span>单词插值:{{*msg}}</span>
插入原始HTML，这种方式内容以 HTML 字符串插入，数据绑定将被忽略，如：
<div>{{{raw_html}}}</div>
如果需要复用模板片断，应当使用partials
注意：
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。记住，只对可信内容使用 HTML 插值，永不用于用户提交的内容。
4.v-show 和 v-if的选择
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
5.使用track-by，优化列表循环
因为 v-for 默认通过数据对象的特征来决定对已有作用域和 DOM
元素的复用程度，这可能导致重新渲染整个列表。但是，如果每个对象都有一个唯一 ID 的属性，便可以使用 track-by 特性给 Vue.js
一个提示，Vue.js 因而能尽可能地复用已有实例。
例如，假定数据为：
{ items: [ { _uid:'88f869d',...}, { _uid:'7496c10',...} ]}
然后可以这样给出提示：
<div v-for="item in items" track-by="_uid">
</div>
然后在替换数组 items 时，如果 Vue.js 遇到一个包含 _uid: ‘88f869d’ 的新对象，它知道它可以复用这个已有对象的作用域与 DOM 元素。
6.prop数据绑定）=
prop 默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
解决办法: 使用.sync或.once绑定修饰符显式地强制双向或单次绑定
1.默认为单向绑定
<child :msg="parentMsg"></child>
2.双向绑定
<child :msg.sync="parentMsg"></child>
3.单次绑定
<child :msg.once="parentMsg"></child>
7、组件的父链
子组件可以用this.$parent访问它的父组件。根实例的后代可以用this.$root访问它。父组件有一个数组this.$children，包含它所有的子元素。
网友评论