Vue.js大总结

最近回顾了一下Vue.js的基础知识，把认为重要的几个点简单的罗列了出来

vue渐进式的理解

vue能够开发不少插件，能够把不少插件组合到一块儿，渐进的增长vue的功能

update beforeUpdated

在这两个钩子中不要修改data数据，不然会死循环，
由于数据修改后update会执行，执行后又会修改数据，如此便会死循环

data

data为何要是一个函数而不是一个属性？

由于要保证每个实例都有一个属于本身的做用域

v-model

注意的问题

一、v-model是个语法糖（它是由v-bind和v-on结合体，原理是利用这两个实现）
二、v-model在自定义组件上的使用（文档）

props验证

一、告诉使用你组件的开发人员该传什么类型的参数
二、三种验证方式

修饰符

.sync

在子组件中可修改父组件传递的值（虽然通常不容许）

ref 和 refs

refs至关于一个钩子，能勾到定义了ref的组件，能够用实现父组件拿到子组件的数据并进行修改，
但通常不这么作，由于这么作破坏了单向数据流，
咱们应该进行父子组件传参，拿到参数后进行保存在data中在进行修改

混入mixin

• 尽可能避免全局混入，

开发插件

流程及规则

一、vue.use()使用插件

二、开发插件
MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

生产环境的部署

先后端不分离发布（nginx中间服务器）

TypeScript

vue 2.0写ts很艰难，vue3.0将会改善，并直接引入类的概念

Vue Router

$route 和 $router

$route保存的路由的信息
$router上挂在是路由的方法

虚拟DOM

逐层比较要改变后的DOM
比较后在内存中更改
更改后再次逐层比较

服务端渲染 ssr框架

vue在服务器端的渲染（Node.js举例）

一、装载服务端渲染依赖包 yarn add vue-server-renderer
二、装载vue的包 yarn add vue
三、引入vue并实例化vue（不用挂在el，由于实在后端）
四、引入vue-server-renderer并建立实例
五、....

服务端渲染框架 （nuxt）

nuxt官方中文文档