【无标题】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vuex是什么？

vue3.0 向下兼容 vue2.x 版本，优化了主要核心双向绑定原理和体积大小，并且更加友好的兼容 ts 语法。

二、vue3创建 选择 vue3.0 生成项目即可

vue-cil 创建
## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
安装或者升级你的@vue/cli
npm install -g @vue/cli
创建
vue create vue_test

vue3.0 响应式原理

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

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

proxy 简介

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]
  },
})
// 以上 即可实现对象的增删改查的监听，实现数据的相应式

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，直接：
{{xxx}}

生命周期函数

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

万 屁死