Vue的学习重点

最新推荐文章于 2024-02-27 14:22:33 发布

原创最新推荐文章于 2024-02-27 14:22:33 发布 · 516 阅读

3 ·

CC 4.0 BY-SA版权

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.youkuaiyun.com/x550392236/article/details/80668263
流程图：
在这里插入图片描述