Vue3 $set？

目录

一、背景

二、Vue3 $set

三、Vue3 和 Vue2 在编写代码中的区别

四、 Vue3 使用路由router

五、Vue3 封装axios 

六、Vue3 引入防抖和节流提升性能

七、Vue3 实际项目踩坑+总结【汇总篇】

八、Vue3 + Vue-cli (1) 基础篇

九、Vue3 v-model 变更 

十、Vue3 + Axios + Element-Plus 实现全局的合并请求loading

十一、找不到模块“axios”或其相应的类型声明。ts(2307) 

---

一、背景

在Vue2中，修改某一些数据，视图是不能及时重新渲染的。
比如数组

<div v-for="(item, index) in myHobbies" :key="index">{{ item }}</div>

data: () => ({
  myHobbies: ['篮球', '羽毛球', '桌球']
});
mounted () {
  this.myHobbies[1] = 'sing';  // 视图层并没有改变
}

因此，Vue2就提供了一些变异的方法，比如$set

this.$set(myHobbies, 1, 'sing');

为什么不能直接修改？为什么要这么鸡肋？

原因是：性能问题。

二、Vue3 $set

而Vue3，利用的是ES6的proxy，对数据响应式进行一个数据的代理。这个就牛逼多了啊，结合Vue3的 composition API。

setup() {
  const myHobbies =  ['篮球', '羽毛球', '桌球'];
  return {
    myHobbies // 导出普通数组
  }
},
mouted() {
  this.myHobbies[1] = 'sing';
}

但Proxy 对 IE不友好，Vue3 在检测到使用 IE 的情况下（包括 IE11），会自动降级为 Object.defineProperty的数据监听系统 

划重点：

Vue3 中 新出的 reactivity API：

1. reactive
2. readonly
3. ref
4. computed

如果想要让一个对象变为响应式数据，可以使用reactive或ref

setup() {
  const myHobbies =  reactive(['篮球', '羽毛球', '桌球']);
  return {
    myHobbies // 导出响应式数组
  }
},
mounted() {
  console.log(this.myHobbies); // 是一个proxy
  this.myHobbies[1] = 'sing'; // 视图更新
}

因此Vue3也就把$set废了。

三、Vue3 和 Vue2 在编写代码中的区别

① 不推荐再使用 this 变量 

② 不再使用2.x 中的 beforeCreate 和 created 生命周期

③ 新增两个新的钩子函数

④ vue-router 4.x

⑤ ……

具体： 

Vue3 和 Vue2 在编写代码中的区别_小草莓蹦蹦跳的博客-CSDN博客

四、 Vue3 使用路由router

具体：

Vue3 使用路由router_vue3 $router_小草莓蹦蹦跳的博客-CSDN博客

五、Vue3 封装axios 

① 环境配置   ② 请求拦截     ③ 响应拦截

具体： 

Vue3 封装axios_vue3封装axios_小草莓蹦蹦跳的博客-CSDN博客

六、Vue3 引入防抖和节流提升性能

① 防抖的原理及应用

② 节流的原理及应用

具体： 

Vue3 引入防抖和节流提升性能_vue3 throttle_小草莓蹦蹦跳的博客-CSDN博客

七、Vue3 实际项目踩坑+总结【汇总篇】

① 基础篇、组件篇、在子页面更改全局样式不生效？

② 表单初始化数据提示 Property "xxx" was accessed during render but is not defined on instance.

③ 遍历提示错误 'v-model' directives cannot update the iteration variable itself

④ input 每次输入一个字符后自动失去焦点、引入防抖和节流提升性能

⑤ 实现全局的合并请求loading、v-model 变更

⑥ vue-cli 4.x 配置 htmlWebpackPlugin.options.title、复制到剪贴板

⑦ $set？、首屏渲染 loading、table表格为空时、输入框模拟验证码输入效果

⑧ 表格的合并、使用路由router、忽略 ts 的无故报错、封装axios

⑨ Vue3 和 Vue2 在编写代码中的区别、报错

具体： 

Vue3 实际项目踩坑+总结【汇总篇】_小草莓蹦蹦跳的博客-CSDN博客

八、Vue3 + Vue-cli (1) 基础篇

具体：

Vue3 + Vue-cli (1) 基础篇_vue3 vue-cli_小草莓蹦蹦跳的博客-CSDN博客

九、Vue3 v-model 变更 

① 变更内容          ② 详细介绍 

③ 语法比对          ④ 迁移策略

具体： 

Vue3 v-model 变更_小草莓蹦蹦跳的博客-CSDN博客

十、Vue3 + Axios + Element-Plus 实现全局的合并请求loading

 具体：

Vue3 + Axios + Element-Plus 实现全局的合并请求loading_el-loading target_小草莓蹦蹦跳的博客-CSDN博客

十一、找不到模块“axios”或其相应的类型声明。ts(2307) 

具体：

找不到模块“axios”或其相应的类型声明。ts(2307)_小草莓蹦蹦跳的博客-CSDN博客