Vue-进阶学习

1、vm(Vue的实例对象)中的data属性存放的数据才是响应式的

var vm = new Vue({  data:{  a:1  }})

// `vm.a` 是响应的

vm.a=20         

 执行此操作,可以在console中看到vm对象下属性a为20并且属性_data属性下a也为20

vm.b = 2            执行此操作是与对象vm的data属性同一级属性b中添加

// `vm.b` 是非响应的    

2、由于 Vue 不允许动态添加根级响应式属性(data属性中存放的是响应式的数据)，所以你必须在初始化实例前声明根级响应式属性，哪怕只是一个空值。想要在创建实例对象上动态添加新的根级响应式属性--也就是说在vm的data属性存在的对象中添加属性和值。使用 Vue.set(object, key, value)    object指在data中的对象   key指键  value指值

var vm=new Vue({
el: '#app',
data:{
a:10,
obj:{
"a":1
}
}
})

Vue.set(vm.obj,"b",2)      //或者使用  vm.$set(vm.obj,"b",2)

3、往已有对象中添加属性。使用 Object.assign() 或 _.extend() 方法来添加属性。但是，添加到对象上的新属性不会触发更新

vm.obj=Object.assign(vm.obj,{"b":2})        //实例中已有对象,添加对象(属性和属性值)

4、 Vue 执行 DOM 更新是异步的，只要观察到数据变化，Vue 就开始一个队列，将同一事件循环内所有的数据变化缓存起来

在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调在 DOM 更新完成后就会调用。         (16-进阶-判断DOM 更新完成后.html)

5、过渡效果

元素封装成过渡组件之后，在遇到插入或删除时，Vue 将
①自动嗅探目标元素是否有 CSS 过渡或动画，并在合适时添加/删除 CSS 类名。
②如果过渡组件设置了过渡的 JavaScript 钩子函数，会在相应的阶段调用钩子函数。
③如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作（插入/删除）在下一帧中立即执行

使用<name="my-transition>" 可以重置前缀，比如 v-enter 替换为 my-transition-enter。

6、CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

自定义过渡类名优先级高于普通的类名 

enter-class 
enter-active-class 
leave-class 
leave-active-class

v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

7、通过 watcher 我们能监听到任何数值属性的数值更新。

8、Vue 推荐使用在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是render 函数，它比 template 更接近编译器。   -/*render 渲染,着色   template 模板*/

9、组件需要的一切都是通过上下文传递，包括：
props: 提供props 的对象 
children: VNode 子节点的数组 
slots: slots 对象 
data: 传递给组件的 data 对象 
parent: 对父组件的引用

10、标记组件为 functional， 这意味它是无状态（没有 data），无实例（没有 this 上下文）。
一个 函数化组件

11、代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。

12、指令定义函数提供了几个钩子函数（可选）：bind、inserted、update、componentUpdated、unbind

钩子函数的参数 (包括 el，binding，vnode，oldVnode)  注意:除了 el 之外，其它参数都应该是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

13、混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

14、插件   学了单文件组件，才能进入了高级 JavaScirpt 应用领域。