initMixin(Vue)->_init->$options
-> $mount()
當執行該掛載方法時DOM變化css
initstate(vm)->initData()->proxy(vm,_data
,key)代理函數
因此咱們也能夠同過this._data.dataName獲取到數據
vue
$mount->處理e(編譯,轉化成render函數)->mountComponent()->updateComponent()->渲染Wathernode
_render->從vm.options拿到render->render.call(vm._renderProxy,vm.$createElement)->initProxy->hasHandler判斷元素若是不在target上,則會報錯warnNonPresent-> 返回vnodewebpack
_update定義在src/core/instance/lifecycle.js (渲染)web
vm.__patch__
vuex
patch數組
createPatchFunction ( 內部定義了一系列的輔助方法,最終返回了一個 patch 方法,這個方法就賦值給了 vm._update 函數裏調用的安全
vm.__patch__
)babel
函數柯里化app
is
屬性,解決模板標籤出現bug問題經過自動操縱transition中的元素的class實現
<link rel="stylesheet" href="./animate.css"> <script src="./vue.min.js"></script> <style> .fade-enter,.fade-leave-to{ opacity: 0; } .fade-enter-active, .fade-leave-active{ transition: opacity 3s; } </style> </head> <body> <div id="app"> <!-- type="transition" 放在transition裏面指定指行的時間以animate或者transition爲準--> <transition :duration="{enter: 5000, leave: 10000}" name="fade" appear enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active" appear-active-class="animated swing" > <div v-show="show">hello meijing</div> </transition> <button @click="handleClick">切換</button> </div> <script> var vm = new Vue({ el: '#app', data: { show: true }, methods: { handleClick: function(){ this.show = !this.show } } }) </script>
<link rel="stylesheet" href="./animate.css"> <script src="./vue.min.js"></script> <script src="./velocity.min.js"></script> </head> <body> <div id="app"> <transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter" > <!-- <transition name="fade" @before-leave="handleBeforeEnter" @leave="handleEnter" @after-leave="handleAfterEnter" > --> <div v-show="show">hello meijing</div> </transition> <button @click="handleClick">切換</button> </div> <script> var vm = new Vue({ el: '#app', data: { show: true }, methods: { handleClick: function(){ this.show = !this.show }, handleBeforeEnter: function(el){ el.style.opacity = 0; }, handleEnter: function(el, done){ Velocity(el, {opacity: 1}, {duration: 1000, complete: done}) }, handleAfterEnter: function(el){ console.log("動畫結束") } } }) </script>
next(vm => {console.log(vm.id)})
...mapState({*** : (state) => state.**})
...mapState(['**'])