vue3.0 setup 用法 (详解)
vue3新语法糖——setupsetup函数是 Composition API(组合API)的入口在setup函数中定义的变量和方法最后都是需要 return 出去的不然无法在模板中使用setup函数的注意点:1、由于在执行 setup函数的时候,还没有执行 Created 生命周期方法,所以在 setup 函数中,无法使用 data 和 methods 的变量和方法2、由于我们不能在 setup
vue3新语法糖——setup
- setup函数是 Composition API(组合API)的入口
- 在setup函数中定义的变量和方法最后都是需要 return 出去的不然无法在模板中使用
setup函数的注意点:
1、由于在执行 setup函数的时候,还没有执行 Created 生命周期方法,所以在 setup 函数中,无法使用 data 和 methods 的变量和方法
2、由于我们不能在 setup函数中使用 data 和 methods,所以 Vue 为了避免我们错误的使用,直接将 setup函数中的this修改成了 undefined
3、setup函数只能是同步的不能是异步的
一.setup 参数
官网说明:
使用 setup 函数时,它将接收两个参数:
props
context
1.props参数
setup 函数中的 props 是响应式的,当传入新的 prop 时,它将被更新
export default {
props: {
title: String
},
setup(props) {
console.log(props.title)
}
}
但是,因为 props 是响应式的,你不能使用 ES6 解构,它会消除 prop 的响应性。
如果需要解构 prop,可以在 setup 函数中使用 toRefs 函数来完成此操作:
import { toRefs } from 'vue'
setup(props) {
const { title } = toRefs(props)
console.log(title.value)
}
如果 title 是可选的 prop,则传入的 props 中可能没有 title 。在这种情况下,toRefs 将不会为 title 创建一个 ref 。你需要使用 toRef 替代它:
import { toRef } from 'vue'
setup(props) {
const title = toRef(props, 'title')
console.log(title.value)
}
2.context参数
传递给 setup 函数的第二个参数是 context。context 是一个普通 JavaScript 对象,暴露了其它可能在 setup 中有用的值:
export default {
setup(props, context) {
// Attribute (非响应式对象,等同于 $attrs)
console.log(context.attrs)
// 插槽 (非响应式对象,等同于 $slots)
console.log(context.slots)
// 触发事件 (方法,等同于 $emit)
console.log(context.emit)
// 暴露公共 property (函数)
console.log(context.expose)
}
}
context 是一个普通的 JavaScript 对象,也就是说,它不是响应式的,这意味着你可以安全地对 context 使用 ES6 解构。
export default {
setup(props, { attrs, slots, emit, expose }) {
...
}
}
二.ref,reactive----data, methods
例:
<template>
<div id="setup">
{{name}}
<p>{{age}}</p>
<button @click="add()">+</button>
<br>
<p>{{admin}}</p>
{{pass}}
</div>
</template>
<script>
import {ref,reactive,toRefs} from 'vue'
export default {
name:'setup',
setup(){
const name =ref('小四')
const age=ref(7)
function add(){
age.value++ //想改变值或获取值 必须.value
}
const testmr = reactive({
admin: '小小鸭',
pass: 20
});
return { //必须返回 模板中才能使用
name,age,add,...toRefs( testmr )
}
}
}
</script>
三.watch
watch 第一个参数可以传递参数,也可以传递函数
例:第一个参数为传递参数
//点击按钮 输出state,改变
<template>
<button @click="bianhua">数字: {{ state.count }}</button>
</template>
<script>
import { reactive, watch } from 'vue'
export default {
setup () {
let state = reactive({count: 0})
let bianhua= () => state.count++;
watch(state, () => {
console.log(state, '改变')
})
return { state, bianhua}
}
}
</script>
例:第一个参数为函数
//点击按钮 输出旧的 新的数字 ,改变
<template>
<button @click="change">count is: {{ state.count }}</button>
</template>
<script>
import { reactive, watch } from 'vue'
export default {
setup () {
let state = reactive({count: 0})
let change = () => state.count++;
watch(() => state.count, (oldVlaue, newValue) => {
console.log(oldVlaue, newValue, '改变')
})
return { state, change }
}
}
</script>
更多推荐
所有评论(0)