Vue | Last Stand

vue指令

1.1 钩子函数一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 update 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。 componentUpdated 指令所在组件的 VNode 及其子 VNode 全部更新后调用。 unbind 只调用一次，指令与元素解绑时调用。 Vue.directive('gqs',{ bind() { // 当指令绑定到 HTML 元素上时触发.**只调用一次** console.log('bind triggerd') }, inserted() { // 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 `div#app`)**.但不保证,父元素已经插入了 DOM 文档.** console.log('inserted triggerd') }, updated() { // 所在组件的`VNode`更新时调用. console.log('updated triggerd') }, componentUpdated() { // 指令所在组件的 VNode 及其子 VNode 全部更新后调用。 console.log('componentUpdated triggerd') }, unbind() { // 只调用一次，指令与元素解绑时调用. console.log('unbind triggerd') } }) 1.2 钩子函数参数指令钩子函数会被传入以下参数： ...

数据绑定

1. 定义 1.1 双向绑定 & 单向绑定 vue的双向绑定，即数据与视图的响应式设计。具体表现为：View的改变能实时让Model发生变化，而Model的变化也能实时更新View。什么情况下用户可以更新View呢？如：填写表单。当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那就相当于把Model和View做了双向绑定。注意区别：单向数据绑定，所有数据只有一份，一旦数据变化，就去更新页面(只有data–>DOM，没有DOM–>data)。用户在页面作出更新，需要用户手动收集(双向绑定是自动收集)，在合并到原有的数据中。 Vue.js中的v-model主要用在表单的input输入框，完成视图和数据的双向绑定： <!DOCTYPE html> <html> <head></head> <body> <div id="app"> <input type="text" v-model="message"> <p>{{message}}</p> </div> <script> var app = new Vue({ el: '#app', data: { message: '' } }); </script> </body> </html> 1.2 v-model来添加双向绑定 <input v-model="xxx">  <input :value="xxx" @input="xxx = $event.target.value">  1.3 双向绑定、单向绑定的优缺点单向绑定：数据流也是单向的，对于复杂应用来说是实施统一状态管理（如redux）的前提。双向绑定：在一些需要实时反应用户输入的场合会非常方便（如多级联动菜单）。但常认为复杂应用中这种便利比不上引入状态管理带来的优势。因为不知道状态什么时候发生改变，是谁造成的改变，数据变更也不会通知。响应式的思路：mvvm Model，View，View-Model 2. 原理概述 Vue 数据双向绑定原理是通过数据劫持 + 发布者-订阅者模式的方式来实现的，首先是通过 ES5 提供的 Object.defineProperty() 方法来劫持（监听）各属性的 getter、setter，并在当监听的属性发生变动时通知订阅者，是否需要更新，若更新就会执行对应的更新函数。详见 vue源码。 ...

Vue实例挂载

一、思考我们都听过知其然知其所以然这句话那么不知道大家是否思考过new Vue()这个过程中究竟做了些什么？过程中是如何完成数据的绑定，又是如何将数据渲染到视图的等等一、分析首先找到vue的构造函数源码位置：src\core\instance\index.js function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword') } this._init(options) } options是用户传递过来的配置项，如data、methods等常用的方法 vue构建函数调用_init方法，但我们发现本文件中并没有此方法，但仔细可以看到文件下方定定义了很多初始化方法 initMixin(Vue); // 定义 _init stateMixin(Vue); // 定义 $set $get $delete $watch 等 eventsMixin(Vue); // 定义事件 $on $once $off $emit lifecycleMixin(Vue);// 定义 _update $forceUpdate $destroy renderMixin(Vue); // 定义 _render 返回虚拟dom 首先可以看initMixin方法，发现该方法在Vue原型上定义了_init方法源码位置：src\core\instance\init.js Vue.prototype._init = function (options?: Object) { const vm: Component = this // a uid vm._uid = uid++ let startTag, endTag /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { startTag = `vue-perf-start:${vm._uid}` endTag = `vue-perf-end:${vm._uid}` mark(startTag) } // a flag to avoid this being observed vm._isVue = true // merge options // 合并属性，判断初始化的是否是组件，这里合并主要是 mixins 或 extends 的方法 if (options && options._isComponent) { // optimize internal component instantiation // since dynamic options merging is pretty slow, and none of the // internal component options needs special treatment. initInternalComponent(vm, options) } else { // 合并vue属性 vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ) } /* istanbul ignore else */ if (process.env.NODE_ENV !== 'production') { // 初始化proxy拦截器 initProxy(vm) } else { vm._renderProxy = vm } // expose real self vm._self = vm // 初始化组件生命周期标志位 initLifecycle(vm) // 初始化组件事件侦听 initEvents(vm) // 初始化渲染方法 initRender(vm) callHook(vm, 'beforeCreate') // 初始化依赖注入内容，在初始化data、props之前 initInjections(vm) // resolve injections before data/props // 初始化props/data/method/watch/methods initState(vm) initProvide(vm) // resolve provide after data/props callHook(vm, 'created') /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { vm._name = formatComponentName(vm, false) mark(endTag) measure(`vue ${vm._name} init`, startTag, endTag) } // 挂载元素 if (vm.$options.el) { vm.$mount(vm.$options.el) } } 仔细阅读上面的代码，我们得到以下结论： ...