实战 - 插件

form-validate



    
        
        

        

        
            
                {{ error }}

i18n




  {{ $t('welcome-message') }}

实战 - 组件

Vue组件=Vue实例=new Vue(options)

属性
- 自定义属性 props:组件props中声明的属性
- 原生属性 attrs：没有声明的属性，默认自动挂载到组件根元素上
- 特殊属性 class,style：挂载到组件根元素上
事件
- 普通事件 @click,@input,@change,@xxx 通过this.$emit('xxx')触发
- 修饰符事件 @input.trim @click.stop
插槽
- v-slot:xxx
- v-slot:xxx="props"
- 相同名称的插槽替换

动态导入/延迟加载组件

基于路由拆分

const routes = [
  { path: /foo', component: () => import('./RouteComponent.vue') }
]

函数式组件

无状态、实例、this上下文、生命周期

临时变量组件

批量渲染标签组件

封装应用实例化函数

function createApp ({ el, model, view, actions }) {
  const wrappedActions={}
  Object.keys(actions).forEach(key=>{
    const originalAction=actions[key]
    wrappedActions[key]=()=>{
      const nextModel=originalAction(model)
      vm.model=nextModel
    }
  })

  const vm=new Vue({
    el,
    data:{model},
    render(h){
      return view(h,this.model,wrappedActions)
    }
  })
}

createApp({
  el: '#app',
  model: {
    count: 0
  },
  actions: {
    inc: ({ count }) => ({ count: count + 1 }),
    dec: ({ count }) => ({ count: count - 1 })
  },
  view: (h, model, actions) => h('div', { attrs: { id: 'app' }}, [
    model.count, ' ',
    h('button', { on: { click: actions.inc }}, '+'),
    h('button', { on: { click: actions.dec }}, '-')
  ])
})

高阶组件



    
        
            这是一个具名插槽

异步组件

const AsyncComp = () => ({
  // 需要加载的组件。应当是一个 Promise
  component: import('./MyComp.vue'),
  // 加载中应当渲染的组件
  loading: LoadingComp,
  // 出错时渲染的组件
  error: ErrorComp,
  // 渲染加载中组件前的等待时间。默认：200ms。
  delay: 200,
  // 最长等待时间。超出此时间则渲染错误组件。默认：Infinity
  timeout: 3000
})
Vue.component('async-example', AsyncComp)

实战 - 组件通信

父传子props

子传父组件$emit, $on, $off

在组件中，可以使用 $emit, $on, $off 分别来分发、监听、取消监听事件

// NewTodoInput ---------------------
// ...
methods: {
  addTodo: function () {
    eventHub.$emit('add-todo', { text: this.newTodoText })
    this.newTodoText = ''
  }
}
// DeleteTodoButton ---------------------
// ...
methods: {
  deleteTodo: function (id) {
    eventHub.$emit('delete-todo', id)
  }
}
// Todos ---------------------
// ...
created: function () {
  eventHub.$on('add-todo', this.addTodo)
  eventHub.$on('delete-todo', this.deleteTodo)
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy: function () {
  eventHub.$off('add-todo', this.addTodo)
  eventHub.$off('delete-todo', this.deleteTodo)
},
methods: {
  addTodo: function (newTodo) {
    this.todos.push(newTodo)
  },
  deleteTodo: function (todoId) {
    this.todos = this.todos.filter(function (todo) {
      return todo.id !== todoId
    })
  }
}

内置$parent、$children、$ref;$attrs和$listeners

$ref ref="xxx"
$parent / $children：访问父 / 子实例

高阶插件/组件库 provide & inject(observable)

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

// 父级组件提供 'state'
var Provider = {
  provide: {
    state = Vue.observable({ count: 0 })
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['state'],
  created () {
    console.log(this.state) // => { count: 0 }
  }
  // ...
}

全局对象 Event Bus

const state={count:0}

const Counter = {
  data(){return state},
  render:h=>h('div',state.count)
}

new Vue({
  el: '#app',
  components:{Counter},
  methods:{
    inc(){
      state.count++
    }
  }
})

//中央事件总线
var bus = new Vue();
var app = new Vue({
  el: "#app",
  template: `
            
                
                
            
        `
});
// 在组件 brother1 的 methods 方法中触发事件
bus.$emit("say-hello", "world");
// 在组件 brother2 的 created 钩子函数中监听事件
bus.$on("say-hello", function(arg) {
  console.log("hello " + arg);
  // hello world
});

自实现boradcast和dispatch

**$dispatch 和 $broadcast 已经被弃用,使用
Vuex代替**

以下自实现参考 iview/emitter.js at 2.0 · iview/iview -github

function broadcast(componentName, eventName, params) {
    this.$children.forEach(child => {
        const name = child.$options.name;

        if (name === componentName) {
            child.$emit.apply(child, [eventName].concat(params));
        } else {
            // todo 如果 params 是空数组，接收到的会是 undefined
            broadcast.apply(child, [componentName, eventName].concat([params]));
        }
    });
}
export default {
    methods: {
        dispatch(componentName, eventName, params) {
            let parent = this.$parent || this.$root;
            let name = parent.$options.name;

            while (parent && (!name || name !== componentName)) {
                parent = parent.$parent;

                if (parent) {
                    name = parent.$options.name;
                }
            }
            if (parent) {
                parent.$emit.apply(parent, [eventName].concat(params));
            }
        },
        broadcast(componentName, eventName, params) {
            broadcast.call(this, componentName, eventName, params);
        }
    }
};

原理 - 响应式

单向数据流，双向绑定语法糖

demo

原理

数据劫持+观察订阅模式：

在读取属性的时候依赖收集，在改变属性值的时候触发依赖更新
实现一个observer，劫持对象属性
实现一个全局的订阅器Dep，可以追加订阅者，和通知依赖更新
在读取属性的时候追加当前依赖到Dep中，在设置属性的时候循环触发依赖的更新
new Vue(options)创建实例的时候，initData()进行数据劫持
通过Object.defineProperty(obj,key,desc)对data进行数据劫持，即创建get/set函数
- 这里需要考虑对对象的以及对数组的数据劫持(支持 push,pop,shift,unshift,splice,sort,reverse,不支持 filter,concat,slice)
- 对象递归调用
- 数组变异方法的解决办法：代理原型/实例方法
- 避免依赖重读Observer

  // 全局的依赖收集器Dep
   window.Dep = class Dep {
       constructor() {this.subscribers = new Set()}
       depend() {activeUpdate&&this.subscribers.add(activeUpdate)}
       notify() {this.subscribers.forEach(sub =>sub())}
   }
   let activeUpdate
   function autorun(update) {
       function wrapperUpdate() {
           activeUpdate = wrapperUpdate
           update()
           activeUpdate = null
       }
       wrapperUpdate()
   }
   function observer(obj) {
       Object.keys(obj).forEach(key => {
           var dep = new Dep()
           let internalValue = obj[key]
           Object.defineProperty(obj, key, {
               get() {
                   // console.log(`getting key "${key}": ${internalValue}`)
                   // 将当前正在运行的更新函数追加进订阅者列表
                   activeUpdate&&dep.depend() //收集依赖
                   return internalValue
               },
               set(newVal) {
                //console.log(`setting key "${key}" to: ${internalValue}`)
                // 加个if判断，数据发生变化再触发更新
                if(internalValue !== newVal) {
                       internalValue = newVal
                       dep.notify() // 触发依赖的更新
                }
               }
           })
       })
   }
   let state = {count:0}
   observer(state);
   autorun(() => {
       console.log('state.count发生变化了', state.count)
   })
   state.count = state.count + 5;
   // state.count发生变化了 0
   // state.count发生变化了 5

MVVM实现

实现mvvm-github

Model-View-ViewModel,其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View

observer

proxy 方法遍历 data 的 key，把 data 上的属性代理到 vm 实例上(通过Object.defineProperty 的 getter 和 setter )
observe(data, this) 给 data 对象添加 Observer做监听。
- 创建一个 Observer 对象
  - 创建了一个 Dep 对象实例（观察者模式）
    - 遍历data,convert（defineReactive）方法使他们有getter、setter
    - getter 和 setter 方法调用时会分别调用 dep.depend 方法和 dep.notify
      - depend:把当前 Dep 的实例添加到当前正在计算的Watcher 的依赖中
      - notify:遍历了所有的订阅 Watcher，调用它们的 update 方法

computed

computed初始化被遍历computed，使用Object.defineProperty进行处理，依赖收集到Dep.target
触发data值时会触发Watcher监听函数
computed值缓存 watcher.dirty决定了计算属性值是否需要重新计算，默认值为true，即第一次时会调用一次。每次执行之后watcher.dirty会设置为false，只有依赖的data值改变时才会触发

mixin

全局注册的选项，被引用到你的每个组件中
1、Vue.component 注册的【全局组件】
2、Vue.filter 注册的【全局过滤器】
3、Vue.directive 注册的【全局指令】
4、Vue.mixin 注册的【全局mixin】

合并权重
1、组件选项
2、组件 - mixin
3、组件 - mixin - mixin
4、.....
x、全局选项
函数合并叠加(data，provide)
数组叠加(created,watch)
原型叠加（components，filters，directives)
两个对象合并的时候，不会相互覆盖，而是权重小的被放到权重大的的原型上
覆盖叠加(props，methods，computed，inject)
两个对象合并，如果有重复key，权重大的覆盖权重小的
直接替换(el，template，propData 等)

filter

something | myFilter 被解析成_f('myFilter')( something )

nextTick

Vue.js 在默认情况下，每次触发某个数据的 setter 方法后，对应的 Watcher 对象其实会被 push 进一个队列 queue 中，在下一个 tick 的时候将这个队列 queue 全部拿出来 run（ Watcher 对象的一个方法，用来触发 patch 操作）一遍。

原理 - virtaul DOM

真实DOM操作昂贵,虚拟DOM就是js对象，操作代价小

模板编译&渲染

平时开发写vue文件都是用模板template的方法写html，模板会被编译成render函数，流程如下：

初始化的时候

- 模板会被编译成render函数
- render函数返回虚拟DOM
- 生成真正的DOM

数据更新的时候

- render函数返回新的virtual Dom
- 新的virtual Dom和旧的virtual Dom做diff
- 将差异运用到真实DOM

render API

    //template, jsx, render本质都是一样的, 都是一种dom和数据状态之间关系的表示
    render(h) {
        h(tag, data, children)
    }
    // tag可以是原生的html标签
    render(h) {
        return h('div', { attrs: {}}, [])
    }
    // 也可以是一个vue component
    import vueComponent from '...'
    render(h) {
        h(vueComponent, {
            props: {} 
        })
    }

偏逻辑用render，偏视图用template

compile

compile 编译可以分成 parse、 optimize 与 generate 三个阶段，最终需要得到 render function。

parse：会用正则等方式解析 template 模板中的指令、class、style 等数据，形成 AST。
- transclude(el, option) 把 template 编译成一段 document fragment
- compileNode(el, options) 深度遍历DOM,正则解析指令
- vm.bindDir(descriptor, node, host, scope) 根据 descriptor 实例化不同的 Directive 对象
- Directive 在初始化时通过 extend(this, def) 扩展 bind 和 update,创建了 Watcher关联update
- 解析模板字符串生成 AST `const ast = parse(template.trim(), options)
  循环解析 template,利用正则表达式顺序解析模板，当解析到开始标签、闭合标签、文本的时候都会分别执行对应的回调函数，来达到构造 AST 树的目的。 AST 元素节点总共有 3 种类型，type 为 1 表示是普通元素，为 2 表示是表达式，为 3 表示是纯文本。
optimize：标记 static 静态节点，而减少了比较的过程等优化
- 优化语法树 optimize(ast, options)
  深度遍历这个 AST 树，去检测它的每一颗子树是不是静态节点，如果是静态节点则它们生成 DOM 永远不需要改变(标记静态节点 markStatic(root);标记静态根 markStaticRoots(root, false))

generate：是将 AST 转化成 render function 字符串

AST转可执行的代码 const code = generate(ast, options)

vue模板编译前后：

`
    {{item}}:{{index}}
`


with(this){
  return (isShow) ?
    _c('ul', {
        staticClass: "list",
        class: bindCls
      },
      _l((data), function(item, index) {
        return _c('li', {
          on: {
            "click": function($event) {
              clickItem(index)
            }
          }
        },
        [_v(_s(item) + ":" + _s(index))])
      })
    ) : _e()
}

对比react的jsx编译前后

` 
    Hello World
    
`

h('div',{ id: '1', 'class': 'li-1' },'Hello World',
    h(MyComp, null)
)

diff

vnode

{
  el:  div  //对真实的节点的引用，本例中就是document.querySelector('#id.classA')
  tagName: 'DIV',   //节点的标签
  sel: 'div#v.classA'  //节点的选择器
  data: null,       // 一个存储节点属性的对象，对应节点的el[prop]属性，例如onclick , style
  children: [], //存储子节点的数组，每个子节点也是vnode结构
  text: null,    //如果是文本节点，对应文本节点的textContent，否则为null
}

核心 patch (oldVnode, vnode)
- key和sel相同才去比较，否则新替旧
- patchVnode (oldVnode, vnode)节点比较5种情况
  - if (oldVnode === vnode)，他们的引用一致，可以认为没有变化
  - if(oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text)，文本节点的比较，需要修改，则会调用Node.textContent = vnode.text
  - if( oldCh && ch && oldCh !== ch ), 两个节点都有子节点，而且它们不一样，这样我们会调用updateChildren函数比较子节点
  - else if (ch)，只有新的节点有子节点，调用createEle(vnode)，vnode.el已经引用了老的dom节点，createEle函数会在老dom节点上添加子节点
  - else if (oldCh)，新节点没有子节点，老节点有子节点，直接删除老节点
同层比较作用：将一棵树转换成另一棵树的最小操作次数是O(n^3),同层是O(1)
key的作用:
- 为了在数据变化时强制更新组件，以避免“原地复用”带来的副作用。
- 在交叉对比没有结果(列表数据的重新排序，插，删)的时候会采用key来提高这个diff速度（不设key，newCh和oldCh只会进行头尾两端的相互比较，设key后，除了头尾两端的比较外，还会从用key生成的对象oldKeyToIdx中查找匹配的节点,从而移动dom而不是销毁再创建）

vue&react vdom区别

Vue 很“ 嚣张 ”，它宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，由于vue会跟踪每一个组件的依赖收集，通过setter / getter 以及一些函数的劫持，能够精确地知道变化，并在编译过程标记了static静态节点，在接下来新的Virtual DOM 并且和原来旧的 Virtual DOM进行比较时候，跳过static静态节点。所以不需要重新渲染整个组件树。
React默认是通过比较引用的方式进行，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如果想避免不必要的子组件重新渲染，你需要在所有可能的地方使用PureComponent，或者手动实现shouldComponentUpdate方法。但是Vue中，你可以认定它是默认的优化。

摘自 https://juejin.im/post/5b6178...

vdom实现

类vue vdom

snabbdom-github

snabbdom源码阅读分析

Vue 2.0 的 virtual-dom 实现简析

类react vdom

preact-github

preact工作原理

原理 - Router(路由)

vue插件，通过hash /history 2中方式实现可配路由
Hash

push(): 设置新的路由添加历史记录并更新视图,常用情况是直接点击切换视图,调用流程:

$router.push() 显式调用方法
HashHistory.push() 根据hash模式调用,设置hash并添加到浏览器历史记录（window.location.hash= XXX）
History.transitionTo() 开始更新
History.updateRoute() 更新路由
app._route= route
vm.render() 更新视图

replace: 替换当前路由并更新视图，常用情况是地址栏直接输入新地址,流程与push基本一致

但流程2变为替换当前hash （window.location.replace= XXX）
3.监听地址栏变化:在setupListeners中监听hash变化(window.onhashchange)并调用replace

History

push:与hash模式类似，只是将window.hash改为history.pushState
replace:与hash模式类似，只是将window.replace改为history.replaceState
监听地址变化:在HTML5History的构造函数中监听popState（window.onpopstate）

实战

const Foo = {
    props: ['id'],
    template: `foo with id: {{id}} `
}
const Bar = {
    template: `bar`
}
const NotFound = {
    template: `not found`
}
const routeTable = {
    '/foo/:id': Foo,
    '/bar': Bar,
}
const compiledRoutes = [];
Object.keys(routeTable).forEach(path => {
    const dynamicSegments = []
    const regex = pathToRegexp(path, dynamicSegments)
    const component = routeTable[path]
    compiledRoutes.push({
        component,
        regex,
        dynamicSegments
    })
})
window.addEventListener('hashchange', () => {
    app.url = window.location.hash.slice(1);
})
const app = new Vue({
    el: '#app',
    data() {
        return {
            url: window.location.hash.slice(1)
        }
    },
    render(h) {
        const url = '/' + this.url
        let componentToRender
        let props = {}
        compiledRoutes.some(route => {
            const match = route.regex.exec(url)
            if (match) {
                componentToRender = route.component
                route.dynamicSegments.forEach((segment,index) => {
                    props[segment.name] = match[index+1]
                })
            }
        })
            return h('div', [
            h('a', { attrs: { href: '#foo/123' } }, 'foo123'),
            '|',
            h('a', { attrs: { href: '#foo/234' } }, 'foo234'),
            '|',
            h('a', { attrs: { href: '#bar' } }, 'bar'),
            h(componentToRender || NotFound, { props })
        ])
    }
})

原理 - props（属性）

父组件怎么传值给子组件的 props

父组件的模板会被解析成一个模板渲染函数，执行时会绑定父组件为作用域

(function() {
    with(this){ 
        return _c('div',{staticClass:"a"},[
            _c('testb',{attrs:{"child-name":parentName}})
        ],1)
    }
})

所以渲染函数内部所有的变量，都会从父组件对象上去获取

组件怎么读取 props

子组件拿到父组件赋值过后的 attr,筛选出 props，然后保存到实例的_props 中,并逐一复制到实例上,响应式的。

父组件数据变化，子组件props如何更新
父组件数据变化,触发set,从而通知依赖收集器的watcher重新渲染

原理 - Vuex

vuex 仅仅是作为 vue 的一个插件而存在，不像 Redux,MobX 等库可以应用于所有框架，vuex 只能使用在 vue 上，很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统，

vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了 vue 自身的响应式设计，依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件；

state

this.$store.state.xxx 取值
提供一个响应式数据
vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data
state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新
它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

getter

this.$store.getters.xxx 取值
借助vue计算属性computed实现缓存
getter 可以对 state 进行计算操作，它就是 store 的计算属性

虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用

如果一个状态只在一个组件内使用，是可以不用 getters

mutaion

this.$store.commit("xxx") 赋值
更改state方法
action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态
action 可以包含任意异步操作

action

this.$store.dispatch("xxx") 赋值
触发mutation方法

module

Vue.set动态添加state到响应式数据中

简单版Vuex实现

//min-vuex
import Vue from 'vue'
const Store = function Store (options = {}) {
  const {state = {}, mutations={}} = options
  this._vm = new Vue({
    data: {
      $$state: state
    },
  })
  this._mutations = mutations
}
Store.prototype.commit = function(type, payload){
  if(this._mutations[type]) {
    this._mutations[type](this.state, payload)
  }
}
Object.defineProperties(Store.prototype, { 
  state: { 
    get: function(){
      return this._vm._data.$$state
    }
  }
});
export default {Store}

使用 Vuex 只需执行 Vue.use(Vuex)，并在 Vue 的配置中传入一个 store 对象的示例，store 是如何实现注入的？

Vue.use(Vuex) 方法执行的是 install 方法，它实现了 Vue 实例对象的 init 方法封装和注入，使传入的 store 对象被设置到 Vue 上下文环境的store中。因此在VueComponent任意地方都能够通过this.store 访问到该 store。

state 内部支持模块配置和模块嵌套，如何实现的？

在 store 构造方法中有 makeLocalContext 方法，所有 module 都会有一个 local context，根据配置时的 path 进行匹配。所以执行如 dispatch('submitOrder', payload)这类 action 时，默认的拿到都是 module 的 local state，如果要访问最外层或者是其他 module 的 state，只能从 rootState 按照 path 路径逐步进行访问。

在执行 dispatch 触发 action(commit 同理)的时候，只需传入(type, payload)，action 执行函数中第一个参数 store 从哪里获取的？

store 初始化时，所有配置的 action 和 mutation 以及 getters 均被封装过。在执行如 dispatch('submitOrder', payload)的时候，actions 中 type 为 submitOrder 的所有处理方法都是被封装后的，其第一个参数为当前的 store 对象，所以能够获取到 { dispatch, commit, state, rootState } 等数据。

Vuex 如何区分 state 是外部直接修改，还是通过 mutation 方法修改的？

Vuex 中修改 state 的唯一渠道就是执行 commit('xx', payload) 方法，其底层通过执行 this._withCommit(fn) 设置_committing 标志变量为 true，然后才能修改 state，修改完毕还需要还原_committing 变量。外部修改虽然能够直接修改 state，但是并没有修改_committing 标志位，所以只要 watch 一下 state，state change 时判断是否_committing 值为 true，即可判断修改的合法性。

调试时的"时空穿梭"功能是如何实现的？

devtoolPlugin 中提供了此功能。因为 dev 模式下所有的 state change 都会被记录下来，'时空穿梭' 功能其实就是将当前的 state 替换为记录中某个时刻的 state 状态，利用 store.replaceState(targetState) 方法将执行 this._vm.state = state 实现。