Vue3.0

admin • 2023-04-22 20:36 • 研发管理

Vue3.0

动机与目的

更好的逻辑复用与代码组织 (composition组合式api)
optionsAPI(旧) => compositionAPI（新）, 效果: 代码组织更方便了, 逻辑复用更方便了非常利于维护!!
更好的类型推导 (typescript支持)
**vue3 源码用 ts 重写了, vue3 对 ts 的支持更友好了 (ts 可以让代码更加稳定, 类型检测! )**

vue3.0优点

性能方面

打包大小减少
初次渲染快 , 更新渲染快
内存减少

源码方面

移除一些冷门 API，比如 filter、inline-template 等，体积减少
引入 tree-shaking 减少打包体积（通过编译阶段的静态分析，找到没有引入的模块并打上标记，并且移除）
使用 Proxy 代替 defineProperty 实现响应式。
Vue3 可以更好的支持 TypeScript
Composition API（组合 API）可以按需使用，多余勾子配置不用再次打包

Vue3.0响应式原理

vue2.x 通过 Object.defineProperty()实现的响应式原理存在以下问题

新增属性、删除属性, 监听不到变化从而不是响应式数据，页面也不会改变
直接通过下标修改数组也监听不到。对此 vue3.0 解决了这些问题

proxy 简介(3.x)

vue 响应式原理本质就是 ES6 新语法 proxy 实现的。 Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截因此提供了一种机制，可以对外界的访问进行过滤和改写. 接收两个参数，var proxy = new Proxy(target, handler); **target** 参数表示所要拦截的目标对象，**handler** 参数也是一个对象，用来定制拦截行为。

// 源对象
let obj = {
  name: 'haha',
  age: 18,
}
// handler作为拦截配置对象
const p = new Proxy(obj, {
  // 读取操作
  get(target, propName) {
    // get方法接收2个参数 target指源对象，就是obj,propName就是你当前操作的属性
    // 返回当前读取的值
    return target[propName]
  },
  // 修改操作,新增属性操作时都会触发
  set(target, propName, value) {
    // set方法接收3个参数 target指源对象，前面2个与上相同，第三个参数是修改的值
    // 通知原对象修改数据
    target[propName] = value
  },
  //删除操作
  deleteProperty(target, propName) {
    return delete target[propName]
  },
})
// 以上 即可实现对象的增删改查的监听，实现数据的相应式

Reflect 简介

Reflect 对象与 Proxy 对象一样，也是 ES6 为了操作对象而提供的新 API。具有反射的意思。将 Object 对象的一些明显属于语言内部的方法（比如 Object.defineProperty），放到 Reflect 对象上。现阶段，某些方法同时在 Object 和Reflect 对象上部署，未来的新方法将只部署在 Reflect 对象上。也就是说，从 Reflect 对象上可以拿到语言内部的方法。
修改某些 Object 方法的返回结果，让其变得更合理，会有一个布尔返回值，易于捕捉错误（js 单线程，报错会阻塞进程）

/ 老写法
try {
  Object.defineProperty(target, property, attributes)
  // success
} catch (e) {
  // failure
}

// 新写法
if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // failure
}
let obj = {
  name: 'haha',
  age: 18,
}
// 三个静态方法：
Reflect.get(obj, 'name') // 返回 haha 读取对象的某个属性的值
Reflect.set(obj, 'name', '小明') //  返回布尔 修改某个属性的值
Reflect.deleteProperty(obj, 'name') //  返回布尔 删除某个属性

const p = new Proxy(obj, {
  //有人读取p的某个属性时调用
  get(target, propName) {
    return Reflect.get(target, propName)
  },
  //有人修改p的某个属性、或给p追加某个属性时调用
  set(target, propName, value) {
    Reflect.set(target, propName, value)
  },
  //有人删除p的某个属性时调用
  deleteProperty(target, propName) {
    return Reflect.deleteProperty(target, propName)
  },
})

生命周期介绍

Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有2个钩子发生了改变 - beforeDestroy改名为beforeUnmount（卸载前） - destroyed改名为unmounted（卸载）与vue2不同的是，vue3中是有了el模板之后才会去初始化，而vue2中是先created之后再去找模板
分为2种形式的生命周期勾子

`组合式 api(Composition API)`

setup

它是 vue3 中一个新的配置项，值为一个函数。所有的组合 api 都要在它里面使用

使用介绍

使用变量或者事件需要把名字 return 出去即可在模板中使用。

export default {
  setup() {
    let name = 'zhang'
    function at() {
      console.log(1)
    }
    return {
      name,
      at,
    }
  },
}

setup 函数的两种返回值，一种就是上面常规返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用，还有一种就是返回一个函数

// 若返回一个渲染函数：则可以自定义渲染内容
import { h } from 'vue'
export default {
  setup() {
    return () => h('h1', '你好')
  },
}

注意事项：

注意 vue3 虽然可以向下兼容 vue2，但是尽量不能混合使用
Vue2.x 配置（data、methos、computed...）中可以访问到 setup 中的属性、方法
由于 setup 中没有 this,所以 setup 中没办法读取 Vue2.x 配置中的数据和方法
如果有重名, setup 优先
setup 执行的时机是最早的，在 beforeCreate 之前执行，所以此时 this 是 undefined
参数问题 setup 接收 2 个参数

props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。

context：上下文对象
- attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 ```this.$attrs```。
- slots: 收到的插槽内容, 相当于 ```this.$slots```。
- emit: 分发自定义事件的函数, 相当于 ```this.$emit```
// 在子组件中
export default {
  props: ['msg', 'school'],
  emits: ['hello'],
  setup(props, context) {
    // props接收props配置项中的相应式数据{msg:'',school:''}
    // context相当于上下文对象，里面有三个值attrs，slots，emit
    //方法
    function test() {
      // 调用父组件方法
      context.emit('hello', 666)
    }
    return {
      test,
    }
  },
}

ref 函数

作用: 定义一个响应式的数据（主要针对基础类型数据）方法：引入 ref 函数，const xxx = ref(initValue) 模板中读取数据: 不需要.value，直接：`<div>{{xxx}}</div>

处理基本数据类型

RefImpl 对象中.value 是基础类型时，用的是 Object.defineProperty 通过 get 和 set 实现的响应式数据

import { ref } from 'vue'
export default {
  setup() {
    let name = ref('张三')
    function change() {
      console.log(name, 'name')
      //ref加工之后生成一个 RefImpl引用对象，该对象的原型对象上可以发现，底层其实还是Object.defineProperty通过
      // get 和set实现的响应式数据
      // 因此改变基本数据需要用到RefImpl引用对象中的value属性
      name.value = '小明'
    }
    return {
      name,
      change,
    }
  },
}

处理对象类型

RefImpl 对象中.value 是对象类型，用的是 proxy 代理对象实现的响应式数据

import { ref } from 'vue'
export default {
  setup() {
    let obj = ref({
      name: '小明',
      age: 20,
    })
    function change() {
      obj.value.name = '小工'
      obj.value.age++
      console.log(obj.value)
      //可以发现是一个Proxy 对象,其本质其实调用的是```reactive```函数实现Proxy代理响应式对象
    }
    return {
      obj,
      change,
    }
  },
}

reactive 函数

作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）方法：const x= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy 的实例对象，简称 proxy 对象）特点：可以实现数组、深层对象的响应式数据，这是 vue2.0 中无法实现的，底层基于 Proxy

export default {
  setup() {
    let obj = reactive({
      name: '小明',
      age: 20,
    })
    function change() {
      console.log(obj, 'obj')
      //可以发现obj此时就是一个Proxy的实例对象可以直接修改对象内部属性
      obj.name = '小三'
      obj.age++
    }
    return {
      obj,
      change,
    }
  },
}

总结 ref 和 reactive

从定义数据角度对比

ref 用来定义：基本类型数据。ref 也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象
reactive 用来定义：对象（或数组）类型数据。

从原理角度对比

ref 通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
reactive 通过使用 Proxy 来实现响应式（数据劫持）, 并通过 Reflect 操作源对象内部的数据。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

THE END

javascript vue vue.js vue3.0 前端

二维码

)">

公司新招了个腾讯拿38K的人，让我见识到了什么才是测试天花板···

< <上一篇

谷歌的Bard和OpenAI的GPT4的对比

下一篇>>

搜索内容

Vue3.0

Vue3.0

动机与目的

vue3.0优点

性能方面

源码方面

Vue3.0响应式原理

proxy 简介(3.x)

Reflect 简介

生命周期介绍

`组合式 api(Composition API)`

setup

使用介绍

注意事项：

ref 函数

处理基本数据类型

处理对象类型

reactive 函数

总结 ref 和 reactive

最新文章

分类

标签云