vue

vue生命周期有哪些？

  beforeCreate      创建组件实例前
  created           创建实例完成，配置数据观测(data observer)，属性和方法的运算， watch/event       事件回调。
  beforeMount       挂载之前，完成了$el和data初始化  ，编译html模板
  mounted           el 被新创建的 vm.$el 替换，将html渲染到页面，
  beforeUpdate      数据更新时调用 该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
  updated           数据更改导致的虚拟 DOM 重新渲染
  beforeDestory     组件销毁前调用   实例仍然完全可用。该钩子在服务器端渲染期间不被调用。 
  destory           组件销毁后调用 Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

  activated     for keep-alive，组件被激活时调用
  deactivated   for keep-alive，组件被移除时调用
  
    父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
    父beforeUpdate->子beforeUpdate->子updated->父updated
    父beforeUpdate->父updated
    父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
    
    1、mounted、updated不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用vm.$nextTick 替换掉mounted、updated：

vuex的原理？

State：  Vuex仓库中的数据。
Getter： 类似于Vue实例中的计算属性，Getter就是普通的获取state包装函数。
Mutations: Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
Action: action可以触发Mutations，不能直接改变state。  dispatch触发方法

getter与computed的区别？ computed与watch的区别？

getter读取  setter设值 
computed可以读取和设值 

watch执行异步操作场景更适用
computed数据未发生变化时，优先读取缓存，发生变化时改变要计算的属性

Vue路由传参

this.$router.push(id){path:`/decribe/${id}`}   path:'/decribe/:id';
params
query

路由懒加载

 组件分割 import异步引入 结合webpack按需加载，减少首页加载用时。

如何编写可复用组件

prop允许外部环境传递数据给组件，在vue-cli工程中也可以使用vuex等传递数据。
事件允许组件触发外部环境的 action
slot允许外部环境将内容插入到组件的视图结构内。

    //示例
        <my-component
    	:foo="bar"
        :bar="qux"
        //子组件调用父组件方法
        @event-a="doThis"
        @event-b="doThat">
        <!-- content -->
        <img slot="icon" src="..." />
        <p slot="main-text">Hello!</p>
        </my-component>

Vue 组件中 data 为什么必须是函数？

返回一个唯一的对象，不要和其他组件共用一个对象进行返回；因为一个组件是可以共享的，但他们的data是私有的，所以每个组件都要return一个新的data对象，返回一个唯一的对象，不要和其他组件共用一个对象。

这个操作是一个简易操作，实际上，它
首先需要创建一个组件构造器，
然后注册组件。
注册组件的本质其实就是建立一个组件构造器的引用。
使用组件才是真正创建一个组件实例。
所以，注册组件其实并不产生新的组件类，但会产生一个可以用来实例化的新方式。
理解这点之后，再理解js的原型链：

var MyComponent = function() {}
MyComponent.prototype.data = {
  a: 1,
  b: 2,
}

如果两个组件实例同时引用一个对象，那么当你修改其中一个属性的时候，另外一个实例也会跟着改。这怎么可以，两个实例应该有自己各自的域才对。

这样每一个实例的data属性都是独立的，不会相互影响了。所以，你现在知道为什么vue组件的data必须是函数了吧。这都是因为js本身的特性带来的，跟vue本身设计无关。

Proxy

Vue3.0使用Proxy替换Object.defineProperty来实现双向数据绑定。 let p = new Proxy(target,handler);