vue2.0的Object.defineProperty和vue3.0的reactive注意点

Particular12.

已于 2022-06-21 17:38:29 修改

阅读量797

点赞数

文章标签： javascript 前端 vue.js

于 2022-06-21 17:37:16 首次发布

本文链接：https://blog.youkuaiyun.com/renfeideboke/article/details/125393094

版权

Object.defineProperty

vue.js 2.0版的双向数据绑定就是通过Object.defineProperty方法实现的，俗称属性拦截器。
Object.defineProperty() 不支持ie8
方法会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，并返回这个对象。

// 语法: /*
 * Object.defineProperty(obj,prop,descriptor)
 * @param: obj:需要定义属性的对象;
 *         prop:需要定义或修改的属性；
 *         descriptor:将被定义或修改属性的描述符{}
 * 返回值 : 返回传入函数的对象，即第一个参数obj
*/

1.什么是reactive?

1、reactive是Vue3中提供实现响应式数据的方法，vue3提出了reactive创建响应式对象的方法。以供开发者来定义data。
2、在Vue2中响应式数据是通过defineProperty来实现的，在 Vue3 中响应式数据是通过 ES6 的 Proxy 来实现的
3、而在Vue3响应式数据是通过ES6的Proxy来实现的

2.reactive注意点

reactive参数必须是对象(json/arr)
如果给reactive传递了其他对象,默认情况下修改对象,界面不会自动更新,如果想更新,可以通过重新赋值的方式.

区别：

在语法上，vue3.0不再通过new对象的形式去创建实例。而是通过函数调用的形式。例如
new Vue() 在3.0中提供了createApp()这个方法去创建vue实例，
在这里插入图片描述

同时，在生命周期方面也做出了些许的调整。vue3.0不再使用befocreated，created这两个生命周期。而是替换成了setup生命周期。并且我们的状态也不再使用data(){return {}}的形式去定义了。统一都放在setup生命周期中通过reactive去创建

setup(){
const data = reactive({
  name:xxx,
})

return {
  data
}

同时我们定义方法也不能在外部定义了。因为外部定义的方法是没办法通过this去访问到setup里的东西的。
所以也得在setup里面去定义

setup(){
const data = reactive({
  name:xxx,
})
const fun  = fun(){
console.log(data.name)
}
return {
  data,
  fun
}

就是以上这种方式。在模板中使用的话也不是通过this了。而是直接通过return出来的东西去访问。

Vue3.0也提供了Composition API形式的生命周期钩子，与Vue2.x中钩子对应关系如下:

beforeCreate ===>setup()
created =======>setup()
beforeMount ===> onBeforeMount
mounted=======> onMounted
beforeUpdate ===> onBeforeUpdate
updated =======> onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted=====> onUnmounted