Vue的学习重点

1. 原理性：

• vue数据驱动： 数据更新，视图更新
• 深入响应式原理
• 双向数据绑定原理
• Vue.set/ this.$set ----- vue中不响应情况 数组的下标 和 length

2. 指令有哪些？

• v-on

   简写：‘@ ’， 用法：绑定事件
  

• v-blind

     简写：‘：’，动态地绑定一个或多个特性，或一个组件 prop 到表达式
  

• v-model

   用法：在表单控件或者组件上创建双向绑定
  

• v-once

   用法：只渲染元素和组件一次。
  

• v-for

   用法：我们用 v-for 指令遍历数组或对象的每一项进行渲染，给每一个dom元素添加key值
  

• v-if

   用于流程控制，可以控制Dom元素：生成和销毁
  

• v-show

   用于频繁的Dom元素切换：隐藏和显示
  

3.计算属性 vs 侦听属性 vs 方法

• 计算属性
  • 有逻辑操作
  • 使用起来要像全局变量一样
• 侦听属性
  • 大量数据操作 / 异步数据请求（ 多 ）
• 方法
  • 事件处理程序
• 自定义指令 / 自定义过滤器
• 全局 / 局部
• 自定义指令是有指令钩子的
  • bind inserted

- 自定义过滤器

 - Vue.filter/ filters
 - 已有数据进行格式化

- 组件的注册

• 全局 / 局部

生命周期

Vue的生命周期是指组件的创建到销毁的过程，
一共分三个阶段，其中一共有8个钩子函数

生命周期的三个阶段：

• 初始化
• 运行中
• 销毁

**打开一个网页会触发有几个钩子？** 
 会触发初始化的四个钩子!

初始化：
	beforeCreate()
	Created()
	beforeMount()
	mounted()

运行中：
	beforeUpdate()
	Update()
销毁：
	beforeDestroy()
	destroyed()

组件通信

• 父子组件： props传递数据， props验证
• 子父组件： 自定义事件 ， 运用 $emit触发
• 非父子组件：
  • ref获取
  • bus事件总线传递
• $attr 属性
• 多组件状态共享 vuex

- 路由 【 数据预载 】

• vue-router 3.x
  -1. 路由基础

	1）， route，它是一条路由
	2）， routes 是一组路由
	3）， router 是一个机制,相当于一个管理者，它来管理路由。

2.有哪些路由呢？

路由的种类：简单路由，嵌套路由
其他路由：动态路由匹配，编程式路由（方法push），命名路由，重定向、别名，路由传参，路由守卫等、

-常用的路由: 动态路由 和 路由传参 和 路由接参

• 导航守卫 【 监听路由 】

路由组件内直接定义以下路由导航守卫：
beforeRouteEnter()				// beforeRouteUpdate守卫，对于带有动态参数路径的路由间跳转，用处很大

beforeRouteUpdate ()		   //beforeRouteEnter 守卫 不能 访问 this，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

beforeRouteLeave()		       // 注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。

- 过渡 和 动画

• vue ssr && nuxt
• key
• 虚拟dom 和 diff算法
• axios vs fetch
• cli2/cli3

- webpack

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

- vuex

Vuex是一个专为Vue开发的应用程序的状态管理模式，它采用集中式存储管理应用的所有组件的状态
,Vuex采用类似全局对象的形式来管理所有组件的公用数据.

** vuex核心四个流程 **：
    actions		用户输入导致的状态变化，异步操作
    mutations 	
    state 	驱动应用的数据源；
    getter	
    module  数据分块

参看网站：https://blog.csdn.net/x550392236/article/details/80668263
流程图：

- 四大辅助工具

• mapState
• mapGetters
• mapActions
• mapMutations

Vue事件修饰符

事件修饰符概览
修饰符 说明
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身(比如不是子元素)触发时触发回调
.once 事件只触发一次