Vue知识点小小小总结

1、原理性：

• vue双向数据绑定：

  我们使用v-model这个指令来实现，数据改变，视图改变，视图改变，数据也随之改变，
  vue是通过数据劫持和订阅发布来进行深入响应的，数据劫持指的是，vue通过es5的
  Object.defineProperty属性对data选项中的数据进行getter和setter设置，订阅发
  布指的是vue通过自定义事件将data的变化反映到视图上去，vue通过observer
  观察者对象反应数据的变化，然后通知vue生成新的Virtual DOM ，进而渲染视图。
  

• vue数据驱动：MVVM，数据更新，视图更新

• 深入响应式原理：数据劫持、订阅发布

• Vue.set/this.$set：针对vue中不响应数组下标、length情况

2、vue的一些指令：

• v-html：解析html标签
• v-text：解析文本
• v-for：用作循环
• v-show：用作元素的显示和隐藏（适合切换频次高）
• v-if：用作元素的创建和销毁（适合切换频次不高的场合，开销大）
• v-on：绑定事件（可简写为@+事件类型，如@click，对于js原生的，要加.native）
• v-else： 必须和v-if连用 不能单独使用 否则报错 模板编译错误
• v-else-if：必须和v-if连用
• v-bind：单向数据绑定（可简写为:）
• v-model：双向数据绑定（适合于表单的输入框）
• v-slot：插槽，给组件模板的未来内容
• v-pre：把标签内部的元素原位输出
• v-once：进入页面时 只渲染一次 不在进行渲染
• v-cloak：防止闪烁

3、计算属性、侦听属性、方法的比较

• 计算属性computed
  • 有逻辑操作
  • 使用起来要像全局变量一样
• 侦听属性
  • 大量数据操作 / 异步数据请求（ 多 ）
• 方法methods
  • 事件处理程序（函数）

4、组件的注册

• 全局和局部注册

  //全局组件注册：
  
      
  
      
      
      
  
  
  vue.component('Hello',{
      template:'#hahaha'
  })
  

  //局部注册，写在VM里面
  new Vue({//VM
      el: '#app',
      components: { //局部注册组件的选项,注意这里是带有"s"的
        // 组件名： 组件选项
        'Hello': {
          template: '
   Hello 这里是局部注册 
  '
        }
      }
    })
  

5、组件生命周期

​ 1、生命周期的概念：

​ vue中的生命周期指的是 组件 从创建到销毁一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（ 这些方法具备一些功能），我们给这些方法起了个名字叫做 生命周期钩子函数（组件钩子 ）。

​ 2、为什么要学习生命周期？

​ 因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩子函数的具体用途。

​ 3、Vue生命周期的三个阶段：

​ Vue的生命周期分为三个阶段，分别为： 初始化，运行中 和 销毁，一共8个钩子函数。

注意： 生命周期钩子函数不允许写成箭头函数，因为这里使用箭头函数就会改变this的指向

• 初始化：

  • beforeCreate(){ } 数据没有获得，真实dom也没有渲染出来
    • created(){ } 数据得到了，真实dom没有渲染出来
    • beforeMount(){ } 数据可以获得，但是真实dom还没有渲染
    • mounted(){ } 可以进行真实dom的操作了（ 可以进行第三方库的实例化，静态数据）

• 运行中：

  • beforeUpdate(){ } 重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
    • updated(){ } 真实dom得到了，数据也得到了（ 更新后的 ），动态数据获取（ 第三方库实例化 ）

• 销毁：用来做善后的,比如计时器的关闭、第三方实例的删除

  • beforedestroy(){ }
    • destroyed(){ }

  销毁分为内部销毁和外部销毁，外部用开关、v-if，这种比较彻底，vue的数据和dom外壳都被销毁；内部销毁用的$destory()方法，这种只能销毁数据，没有销毁dom结构外壳，这时需要dom操作去除外壳。

6、组件通信

• 父子组件通信：父组件属性绑定，子组件props接收
• 子父组件通信：自定义事件
• 非父子组件通信：
  • ref链
  • bus事件总线
• 多组件通信：vuex

7、vue-router 路由 目前已3.0.7版本

• 路由基础：

  • 路由实例对象

  • 路由表

    • 路由名称

    • 路由组件

  • 错误路由

    • 路由重定向

    • 路由模式 hash、history、abstract

      • 路由分块

  • 路由导出 export default

  • 命名路由 name

  • 路由导航

  • 路由展示

• 动态路由、路由传参、路由接参 :to="{name: '',params: {id: xxx}, query: {xxx:xxx}}"
• 编程式导航：push、replace区别 push有历史记录，replace没用，作用像回退两层
• 路由导航守卫（路由监听）

  • 全局路由守卫

    • 全局前置守卫：beforeEach( to,from,next ){ }

       - 全局解析守卫：beforeResolve( to,from,next ){ }
      

      • 全局后置守卫：afterEach( to,from ){ }

  • 路由独享守卫：beforeEnter(){ }

  • 组件内守卫：

    • 组件内前置守卫：beforeRouteEnter(){ }
      • 组件内后置守卫：afterRouteEnter(){ }
        • 组件内更新守卫：beforeRouteUpdate(){ }

8、过渡和动画：组件库 animate.css

9、vue的前端渲染和后端渲染 Nuxt.js服务器端渲染，seo搜索引擎优化

10、:key的必要性 用作vdom的diff算法同级比较，

11、虚拟Dom和diff算法（Render函数、patch补丁对象）

12、前端框架级的数据请求方式

	- axios：封装好的第三方库
	- fetch：原生，需先数据格式化

13、vue的脚手架cli：快速构建项目环境

14、webpack：

• 基本配置
  - 入口 单页面 / 多页面
  • 出口
• loader转换器
  • css/less/sass babel css抽离
• plugin
  • html产出
  • 静态资源拷贝
    • 扩展名省略
    • 服务器配置

15、vue.config.js覆盖webpack的配置文件

> 路径别名、反向代理、语法检测关闭

16、vuex的状态管理模式

	- Vue.component->Actions->Mutations->State->Vue.component
	- 四个辅助工具：mapState mapGetters  mapActions  mapMutations