开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第30天，点击查看活动详情
前言
我们都知道，现在vue3是可以正常去使用methods的。
但是我们却不可以在setUp中去调用methods中的方法。
我们先了解一下下面这两个生命周期函数，分别是：
beforeCreate 表示 data 中的数据还没有初始化，是不可以使用的 Created : data 已经被初始化了，可以使用 setUp在beforeCreate 和 Created 这两个函数之间。
是不是就知道为啥 setUp 中不可以去调用 methods 中的方法了。
setUp 限制
setUp 中无法使用 data 中的数据和调用 methods 的方法。
<script>
export default {
name: 'App',
data:function(){
return {
mess:"我是data"
}
},
methods:{
func(){
console.log("methods中的func")
},
},
setup(){
console.log('this',this);//undefined
this.func();//无法调用的哈
},
}
</script>
setUp 函数的注意点
(1)由于我们不能够在 setUp 函数中使用data和 methods。所以 vue 为了避免我们的错误使用,直接将 setUp 函数中的 this 修改成为了 undefined。
(2)setUp 函数只能够数同步的，不能够是异步的哈。
就是说你不能够这样操作
async setup(){
}
这样会导致界面空白哈
Vue3 中的 reactive
在 Vue2 中响应式数据是通过 defineProperty 来实现的。 而在 Vue3 中响应式数据是通过 ES6 的 Proxy 来实现的。
reactive 需要的注意点
- reactive 参数必须是对象 (json/arr)
- 如果给 reactive 传递了其它对象
- 默认情况下修改对象，界面不会自动更新
- 如果想更新，可以通过重新赋值的方式
reactive 传入字符串数据
reactive 传入字符串数据不更新。
<template>
<div>
<div>
<li>{{str}}</li>
<button @click="func1">按钮</button>
</div>
</div>
</template>
<script>
import {reactive} from 'vue'
export default {
name: 'App',
setup(){
// reactive 的本质就是传入的数据包装成一个proxy对象
// 由于在创建的时候，传递的不是一个对象，那么将不会实现响应式。
let str=reactive(123)
function func1(){
console.log(str);//123
str=666;
}
return {str,func1 }
},
}
</script>
我们发现点击按钮的时候，视图并没有更新。
因为我们传不是一个对象如果想跟新视图。
应该使用 ref 函数。
reactive 传入数组
<template>
<div>
<div>
<li>{{arr}}</li>
<button @click="func1">按钮</button>
</div>
</div>
</template>
<script>
import {reactive} from 'vue'
export default {
name: 'App',
setup(){
let arr=reactive([{name:'张三',age:19},{name:'李四',age:39}])
function func1(){
arr[0].name="我是张三的哥哥"
}
return {arr,func1 }
},
}
</script>
reactive 的更新方式
reactive 传入其他对象的更新方式。
<template>
<div>
<div>
<li>{{sate.time}}</li>
<button @click="func1">按钮</button>
</div>
</div>
</template>
<script>
import {reactive} from 'vue'
export default {
name: 'App',
setup(){
let sate=reactive({
time:new Date()
})
function func1(){
//传入的是其他对象，直接跟新
sate.time="2021年-6月-9日";
}
return {sate,func1 }
},
}
</script>
