Vue3的改变

1.生态与优势

• 社区生态 - 逐步完善

• 整体优化 - 性能优化/TS支持优化/组合式API加持

• 市场使用 - 部分技术选型激进的公司已经在生产环境使用了vue3

 

整体优化

1. 性能提升

   • 首次渲染更快

   • diff算法更快

   • 内存占用更少

   • 打包体积更小

2. 更好的Typescript支持

3. Composition API （重点）

4. 目前还未火起来

---------------------------------------------------------

2.组合式API

setup入口函数(新增的钩子函数)

主要内容

1. setup 函数是一个新的组件选项，作为组件中组合式API 的起点（入口）

2. setup 函数只会在组件初始化的时候执行一次

3. setup 函数在beforeCreate生命周期钩子执行之前执行，实例还没生成，没有this

下面都会将方法与属性写在该函数里面

---------------------------------------

(1) 响应式API: reactive

作用: reactive是一个函数，接收一个普通的对象传入，把对象数据转化为响应式对象并返回

1. 从vue框架中导入reactive函数

2. 在setup函数中调用reactive函数并将想要变成响应式的对象数据当成参数传入

3. 在setup函数中把reactive函数调用完毕之后的返回值以对象的形式返回出去

 上面通过点击事件修改,state的name

 (2) 响应式API: ref

作用: ref是一个函数，接受一个简单类型或者复杂类型的传入并返回一个响应式且可变的 ref 对象

使用步骤

1. 从vue框架中导出ref函数

2. 在setup函数中调用ref函数并传入数据（简单类型或者复杂类型）

3. 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去

4. 注意：在setup函数中使用ref结果，需要通过.value 访问，模板中使用不需要加.value

 

 小结: 

ref 与 reactive的区别

1. ref 函数可以接收一个简单类型的值，返回一个可改变的 ref 响应式对象，从而弥补reactive函数不支持简单类型的问题

2. reactive和ref函数都可以提供响应式数据的转换，具体什么时候需要使用哪个API社区还没有最佳实践，大家暂时可以使用自己熟练的API进行转换

3. 推荐写法 只有我们明确知道要转换的对象内部的字段名称我们才使用reactive，否则就一律使用ref，从而降低在语法选择上的心智负担

------------------------------------------

(3) 计算属性

 (4) 监视属性

 

watch函数接收三个常规参数

1. 第一个参数为函数，返回你要监听变化的响应式数据

2. 第二个参数为响应式数据变化之后要执行的回调函数

3. 第三个参数为一个对象，在里面配置是否开启立刻执行或者深度监听

小结: 

计算属性,监视属性,两个语法上变化挺大,其他也没什么, 有vue2基础的看看也能懂

-----------------------------

(5)生命周期

1. 先从vue中导入以on打头的生命周期钩子函数

2. 在setup函数中调用生命周期函数并传入回调函数

3. 生命周期钩子函数可以调用多次

 

 小结:

1.执行顺序还是一样,组合式API下,生命周期钩子可多次执行

2. 初始化阶段的两个钩子不需要写在 setup 里面,因为他们能做的setup都可以做, setup 执行时机在beforeCreate 之前

3. 销毁阶段的两个钩子改名了,  beforeUnmount 与 unmounted 

4. 在setup里使用, 钩子函数都要导入, 都是 on开头 

 

 -----------------------------

(6)父子通信

实现步骤

1. setup函数提供俩个参数，第一个参数为props，第二个参数为一个对象context

2. props为一个对象，内部包含了父组件传递过来的所有prop数据，context对象包含了attrs，slots， emit属性，其中的emit可以触发自定义事件的执行从而完成子传父

 可以发现一毛一样, 没什么变化, 就是触发emit 与之前不一样

 -----------------------------

(7) provide 和 inject

看到provide , 了解react的老哥,应该猜出来是什么了, 就是跨组价传值

1. 顶层组件在setup方法中使用provide函数提供数据

   provide('key'，数据)

2. 任何底层组件在setup方法中使用inject函数获取数据

   const data = inject('key')

 这里只拿父子组件简单举个例子

注: provide默认情况下传递的数据不是响应式的, 要使用响应式, 用ref 和 reactive 生成即可

--------------------------------------

(8)TemplateRef

背景知识

在模板中使用ref，我们都很清楚，它一般有三种使用场景

1. ref + 普通dom标签 获取真实dom对象

   this.$refs.box

2. ref + 组件标签 获取组件实例对象

   this.$refs.form.validate()

3. ref + v-for 获取由dom对象（实例对象）组成的数组 （不经常使用）

实现步骤

1. 使用ref函数传入null创建 ref对象 => const hRef = ref(null)

2. 模板中通过定义ref属性等于1中创建的ref对象名称建立关联 =>

3. 把hRefreturn出去

4. 使用 => hRef.value

 

 ------------------------------------------------------

(9) 非兼容语法 (删除项)

1.实例方法$on移除 （eventBus现有实现模式不再支持 可以使用三方插件替代）

2.过滤器filter移除 （插值表达式里不能再使用过滤器 可以使用methods替代）

3..sync语法移除 （和v-model语法合并）