setup
Vue3中使用了Composition API这种写法,使得所有的组合API函数都在此使用, 只在初始化时执行一次。
函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用
setup的一些细节问题
1,setup执行的时机 和 返回值:
- 在beforeCreate之前执行(一次), 此时组件对象还没有创建,不能通过this来访问data/computed/methods / props
- 返回值一般为一个对象,返回对象中的属性/方法,会与data/methods函数返回对象的属性合并成为组件对象的属性/方法
- methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods;
- setup不能是一个async函数: 因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性数据
- 如果有重名, setup优先
2,setup的参数:
- setup(props, context) / setup(props, {attrs, slots, emit})
- props: 包含props配置声明且传入了的所有属性的对象
- attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrs
- slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots
- emit: 用来分发自定义事件的函数, 相当于 this.$emit
props: ['msg'],
emits: ['fn'], // 可选的, 声明了更利于程序员阅读, 且可以对分发的事件数据进行校验
setup (props, {attrs, emit, slots}) {
console.log(props.msg, attrs.msg2, slots, emit)
function toClick(){
emit(fn, 'xxxxx') // 相当于 this.$emit
}
}
ref
作用:定义一个数据的响应式
语法:const xxx = ref(initValue)
一般用来定义一个基本类型的响应式数据
- 创建一个包含响应式数据的引用(reference)对象
- js中操作数据: xxx.value
- 模板中操作数据: 不需要.value
结合setup 和 ref 使用说明
其中vue2的写法为:
<template>
<h2>{{count}}</h2>
<hr>
<button @click="update">更新</button>
</template>
<script>
export default {
/* 在Vue3中依然可以使用data和methods配置, 但建议使用其新语法实现 */
data () {
return {
count: 0
}
},
methods: {
update () {
this.count++
}
}
}
</script>
vue3的写法为:
- setup最终会返回一个对象,并且对象中的值可以在模板中使用,如count
- 保证响应式,必须使用ref
<template>
<h2>{{count}}</h2>
<hr>
<button @click="update">更新</button>
</template>
<script>
import {
ref
} from 'vue'
export default {
/* 使用vue3的composition API */
setup () {
// 定义响应式数据 ref对象
const count = ref(1)
console.log(count)
// 更新响应式数据的函数
function update () {
count.value = count.value + 1
}
return {
count,
update
}
}
}
</script>
reactive
作用:定义多个数据的响应式,例如一个对象;
const isProxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
响应式转换是“深层的”:会影响对象内部所有嵌套的属性
内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据都是响应式的
<template>
<h2>name: {{state.name}}</h2>
<h2>age: {{state.age}}</h2>
<h2>wife: {{state.wife}}</h2>
<hr>
<button @click="update">更新</button>
</template>
<script>
import { reactive } from 'vue'
export default {
setup () {
/* 定义响应式数据对象 */
let obj = {
name: 'tom',
age: 25,
wife: {
name: 'marry',
age: 22
},
};
// 此时state通过 reactive代理了obj,使其内属性成为响应式的;
const state = reactive(obj)
// 此时打印state 会得到一个Proxy的一个对象
// state---代理对象,obj---目标对象
console.log(state)
const update = () => {
state.name += '--'
state.age += 1
state.wife.name += '++'
state.wife.age += 2
}
return {
state,
update,
}
}
}
</script>
总结:如果操作代理对象,目标对象中的值也会跟着改变,如果想要页面跟着渲染,也是操作代理对象;文章来源:https://www.toymoban.com/news/detail-634814.html
ref 和 reactive的一些细节
- 是Vue3的 composition API中2个最重要的响应式API;
- ref用来处理基本类型数据, reactive用来处理对象(递归深度响应式);
- 如果用ref对象/数组, 内部会自动将对象/数组转换为reactive的代理对象;
- ref内部: 通过给value属性添加getter/setter来实现对数据的劫持;
- reactive内部: 通过使用Proxy来实现对对象内部所有数据的劫持, 并通过Reflect操作对象内部数据;
- ref的数据操作: 在js中要.value, 在模板中不需要(内部解析模板时会自动添加.value)
export default {
setup () {
const m1 = ref('abc')
const m2 = reactive({x: 1, y: {z: 'abc'}})
// 使用ref处理对象 ==> 对象会被自动reactive为proxy对象
const m3 = ref({a1: 2, a2: {a3: 'abc'}})
console.log(m1, m2, m3)
console.log(m3.value.a2) // 也是一个proxy对象
function update() {
m1.value += '--'
m2.x += 1
m2.y.z += '++'
m3.value = {a1: 3, a2: {a3: 'abc---'}}
m3.value.a2.a3 += '==' // reactive对对象进行了深度数据劫持
console.log(m3.value.a2)
}
return {
m1,
m2,
m3,
update
}
}
}
vue3响应式虽然写起来麻烦,但是减少了vue2响应式带来的性能开销文章来源地址https://www.toymoban.com/news/detail-634814.html
到了这里,关于Vue3 中 setup,ref 和 reactive 的理解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!