vue笔记-----深入响应式原理

模型层只是普通的JavaScript对象，修改它则更新时图。这会让状态管理变得非常
简单且直观，不过理解它的工作原理以避免一些常见的问题也是很重要的。


如何追踪变化
把一个普通的JavaScript对象传给Vue实例的data选项，Vue将遍历此对象的搜游属性
，并使用Object.defineProperty把这些属性全部转为getter/setter。Object.
defineProperty是仅ES5支持，且无法shim的特性，这也就是为什么Vue不支持IE8以
及耕地版本浏览器的原因。


用户看不到getter/setter,但是在内部它们让Vue追踪依赖，在属性被访问和修改时
通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时getter/setter的
格式化并不同，所以你可能余姚安装vue-devtools来获取更加友好的检查接口。


每个组件实例都有相应的watcher实例对象，它会在组件渲染的过程中把属性记录为
依赖，之后当以来想的setter被调用时，会通知watcher重新计算.


变化检测问题


受现代JAvaScript的限制（以及飞起Object.observe）,Vue不能检测到对象属性的
添加或删除。由于vue会在初始化实例时对属性执行getter/setter转化过程，所以属
性必须在data对象上存在才能让Vue转换它，这样才能让它是响应的
var vm = new Vue({
data:{
a:1
}
})
//vm.a是响应式的


vm.b = 2
//vm.b是非响应式的


Vue不允许在已经创建的实例上动态添加新的根级响应式属性。然而他可以使用Vue.
set(object,key,value)方法将响应属性添加到嵌套的对象上：
Vue.set(vm.someObject,'b',2)
您还可以使用vm.$set实例方法，这也是全局Vue.set方法的别名：
this.$set(this.someObject,'b',2)
有事你想向已有对象上添加一些属性，例如使用Object.assign()或_.extend()方法来添加属性。
但是，添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象,
让他包含元对象的属性和新的属性：
//代替Object.assign(this.someObject,{a:1,b:2})
this.someObject = Object.assign({},this.someObject,{a:1,b:2})


声明响应式属性
由于Vue不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式
属性，哪怕只是一个空值：
var vm = new Vue({
data:{
//声明message为一个空值字符串
message:''
}
template:'<div>{{message}}</div>'
})
//之后设置message
vm.message='Hello'


如果你在data选项中未声明message,Vue将警告你渲染函数在试图访问的属性不存在。








#过渡效果
vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。
在css过度和动画中自动应用class
可以配合使用第三方css动画库，如Animate.css
在过度钩子函数中使用JavaScript直接操作DOM
可以配合使用第三方JavaScript动画库，如Velocity.js


#单元素/组件的过度
Vue提供了transition的封装组件，在下列情形中。可以给任何元素和组件添加entering/
leaving过度
*条件渲染（使用v-if）
*条件展示（使用v-show）
*动态组件
*组件根节点


这是一个典型的例子
<div id="demo">
  <button v-on:click="show=!show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
new Vue({
el:'#demo',
data:{
  show:true
  }
})


.fade-enter-active,.fade-leave-active{
  transition:opacity .5s
}
.fade-enter,.fade-leave-active{
  opacity:0
}
当插入或删除包含在transition组件中的元素时，Vue将会做以下处理：
1.自动嗅探目标元素是否应用了css过度或者动画，如果是，在恰当的时机添加/删除
css雷鸣。
2.如果过度组件提供了JavaSWcript钩子函数，这些钩子函数将在恰当的时机被调用。
3.如果没有找到JavaScript钩子并且也没有检测到css过度/动画，Dom操作（插入/删除）
在下一帧中立即执行（注意：这个帧与Vue,和Vue的nextTick概念不同）


#过度的-css类名
会有4个（css）类名在enter/leave的过度中切换
1.v-enter:定义进入过度的开始状态。在元素被插入时生效，在下一帧移除。
2.v-enter-active:定义进入过渡的结束状态。在元素被插入时生效，在transition
/animation完成后移除。
3.v-leave:定义离开过度的开始状态。在离开过度被触发时生效，在下一帧移除。
4.v-leave-active:定义离开过度的结束状态。在离开过度被触发时生效，在
transition/animation完成后移除。


对于这些在enter/leave过度中切换的类名，v-是这些类名的前缀。使用
<transition name="my-transition">可以充值前缀。比如v-enter替换为
my-transition-enter。
v-enter-active和v-leave-active可以控制进入/离开过度的不同阶段。


#css过度
常用的过度否是使用css过度。










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




#自定义过度名
我们可以通过一下特性来自定义过度类名：
*enter-class
*enter-active-class
*leave-class
*leave-active-class
他们的优先级高于普通的类名，这对于vue的过度系统和其他第三方css动画哭，如
Animate.css结合使用十分有用。


#同时使用Transitions和Animations
Vue为了知道过度的完成，必须设置响应的事件监听器。他可以是transitionend
或者animationend,这取决于给元素应用的css规则。如果你是用其中任何一种，
Vue能自动识别类型并设置监听。
但是在一些场景中，你余姚给同一个元素同时舍子两种过度效果，比如animation
很快的呗触发并完成了，而transition效果还没结束。在这种情况中，你就需要
使用type特性并设置animation或者transition来明确你需要vue监听的类型。


#JavaScript钩子
可以在属性中声名JavaScript钩子
这些钩子函数可以结合Css transition/animations使用，也可以单独是使用。
当只用JavaScript过度时候，在enter和leave总，回掉函数done是必须的。否则，
他们会被同步调用，过度会立即完成
推荐对于仅使用JavaScript过度的元素添加v-bind:css="false",Vue会跳过css
的检测。这也可以避免过渡过程中css的影响。


初始渲染的过度
可以通过apear特性设置节点的初始渲染的过度