Vue3的一些基本特性及与Vue2差异

1.安装及目录结构

Vue/cli安装（要求@vue/cli 版本需在4.5.0及以上）”

也可以选择vite ( vite创建的速度比上面的方法快)

目录

2.关于Main.js

1.createApp 的参数是根组件(App)，在挂载应用时，该组件是渲染的起点。

2.一个应用需要被挂载到一个 DOM 元素中，使用 mount('#app') 将 Vue 应用 App挂载到 <div id="app"></div> 中。

3.生命周期

变化：

钩子命名都增加了on

beforeCreate    ->    使用 setup()

created           ->    使用 setup()

beforeDestroy --> beforeUnmount

destroyed --> unmounted

新增用于调试的钩子函数

  onRenderTriggered 跟踪虚拟 DOM 重新渲染时调用

  onRenderTracked 当虚拟 DOM 重新渲染被触发时调用

扩展：Vue3 的生命周期 比 Vue2.X 的生命周期快（onBeforeMount 比 beforeMount 快 其他同理）

4.响应式原理

vue2的响应式原理

对象类型： 通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）

数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）

 存在问题：

        新增属性。删除属性。界面不会更新

        直接通过下表修改数组，界面不会自动更新

vue3的响应式实现原理:

  通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等等。

  通过Reflect（反射）：对被代理对象的属性进行操作

  MDN文档中描述的Proxy与Reflect：可以参考对应的文档

5.关于setup

setup 是 Vue3.x 新增的一个选项

1. setup参数

setup有2个参数
  props：值为对象，包含：组件外部传递过来，且组件内部声明接受了的属性
  context：上下文对象
    attrs:值为对象,包含组件外部传递过来，但没有在props配置中声明的，相当于this.attrs

    slots:收到的插槽内容，相当于this.$slots
    emit:分发自定义事件的函数，相当于this.$emit.

2.setup 执行时机

开始创建组件之前，在 beforeCreate和created 之前执行，创建的是data和method。

3.reactive、ref、toRefs、readonly

在 vue2.x 中,定义数据都是在data中。

但在 Vue3.x 可以使用reactive和ref来进行数据定义。

页面展示

正在上传…重新上传取消

代码

 

 

ref和reactive他们有什么区别呢？

1. reactive用于处理对象的双向绑定，ref处理 js 基础类型或者处理对象的双向绑定。
2. ref它接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property.value。

toRefs 用于将一个 reactive 对象转化为属性全部为 ref 对象的普通对象。

 

Readonly：

有时我们想跟踪响应式对象 (ref 或 reactive) 的变化，但也希望防止在应用程序的某个位置更改它，这时候可以用readonly

通过readonly 修改值，将导致失败并出现警告

扩展：

shallowRef 和 shallowReactive 浅度响应式

shallowReadonly 浅度只读（对象多层嵌套，只关心最外面一层，不关心内层）

4.判断是哪种响应式创建的方法

1.isRef: 检查一个值是否为一个 ref 对象

2.isReactive: 检查一个对象是否是由 reactive 创建的响应式代理

3.isReadonly: 检查一个对象是否是由 readonly 创建的只读代理

4.isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

5.ref获取元素

Vue2获取元素

Vue3获取元素

注意点：

  1.变量名称必须要与 ref 命名的属性名称一致；

  2.通过 divDom.value 的形式获取 DOM 元素；

  3.必须要在 DOM 渲染完成后才可以获取 divDom.value，否则就是 null。

父组件使用ref获取子组件时，想要获取子组件的数据或者方法，子组件可以通过defineExpose方法暴露数据

子组件

父组件

控制台

6.使用async/await

方法一：在它的父组件外层需要嵌套一个suspense内置组件（不推荐）

父组件

子组件

方法二：使用生命周期钩子

6. watch 与 watchEffect 的用法

1.Watch

 参数：watch(source, callback, [options])

 1.source: 可以支持 string,Object,Function,Array；

  2.用于指定要侦听的响应式变量 callback；

  3.执行的回调函数 options：支持 deep、immediate 和 flush 选项。

停止监听

2.WatchEffect

watchEffect会自动收集依赖, 只要指定一个回调函数。

在组件初始化时， 会先执行一次来收集依赖， 然后当收集到的依赖中数据发生变化时， 就会再次执行回调函数。

对比Watch总结

  1.watchEffect 不需要手动传入依赖

  2.watchEffect 会先执行一次用来自动收集依赖

  3.watchEffect无法获取到变化前的值，只能获取变化后的值

7. computed

1.参数为一个回调 默认为 get

页面展示：

2.实现 set 方法

8. Teleport 传送组件

to 是目标的地址 body , #XXX , .XXX 这些都是 css 选择器

例：利用按钮点击来控制teleport是否显示，teleport 一渲染，就会跑到 li 下面

界面展示：

9.样式插槽内容

当插槽内容属于父对象，想在子组件中添加样式修改插槽内容样式，vue2样式并不生效，Vue 3提供的解决方案是提供一个伪选择器 ::v-slotted()

使用方法-例：

子组件modal.vue

父组件-引入使用modal

在子组件中想修改插槽内容样式为斜体

Vue2写法（并不生效）

Vue3 写法

10.总结

了解了 Vue3 的一些基本特性及差异

• 新的脚手架工具vite
• 在 Vue3 仍然支持 Vue2 中的大多数特性
• Vue 组合APi代替了Vue2中的option API ，同一逻辑集中起来，复用性更强了
• Vue3 可使用 TS 编写，更好的支持TS
• Vue3 使用Proxy 代替了Vue2中Object.defineProperty() 实现响应式原理
• 介绍了新的组件: Teleport、Suspense

文章参考链接：

https://blog.csdn.net/weixin_44571638/article/details/118676409

https://blog.csdn.net/duninet/article/details/106472139

https://www.cnblogs.com/zmh114712318/p/16516152.html

https://blog.csdn.net/luofei_create/article/details/124968048

https://blog.csdn.net/sshuai131400/article/details/123621809