目录
setup
Vue3中的一个新的配置项，值为一个函数。组件中所用到的数据、方法等等，均要配置在setup中。setup函数的两种返回值，如下：
若返回一个对象，则对象中的属性、方法、在模板中均可以直接使用。
-
<template>
-
<div>
-
<h2>姓名：{{ name }}
</h2>
-
<h2>年龄：{{ age }}
</h2>
-
</div>
-
<button @click="say">say
</button>
-
</template>
-
<script>
-
export
default {
-
name:
'MyApp',
-
setup(
){
-
let name =
'张三'
-
let age =
18
-
-
function
say(
){
-
let str =
`我的名字是${name},我的年龄是${age}`
-
alert(
'hello workd'+str);
-
}
-
// 返回一个对象
-
return {
-
name,age,say
-
}
-
}
-
}
-
</script>
若返回一个渲染函数，则可以自定义渲染内容。
-
<script>
-
import {h}
from
'vue'
-
export
default {
-
name:
'MyApp',
-
setup(
){
-
// 返回一个函数（渲染函数）
-
return
()=>
h(
'h1',
'渲染函数')
-
}
-
}
-
</script>
-
<template>
-
<div>
-
<h2>姓名：{{ name }}
</h2>
-
<h2>年龄：{{ age }}
</h2>
-
<h2>性别：{{ sex }}
</h2>
-
<h2>身高：{{ height }}
</h2>
-
</div>
-
<button @click="showData">Vue2中打印showData</button><br><br>
-
<button @click="showSetup">Vue3中打印showSetup</button>
-
</template>
-
<script>
-
export
default {
-
name:
'MyApp',
-
// data能与setup进行搭配使用
-
data () {
-
return {
-
sex:
'男',
-
height:
'175'
-
}
-
},
-
methods:{
-
// Vue2中能访问到Vue3中的数据
-
showData(
){
-
console.
log(
'打印data数据里能访问到的数据');
-
console.
log(
this.
sex);
-
console.
log(
this.
height);
-
console.
log(
this.
name);
-
console.
log(
this.
age);
-
}
-
},
-
setup () {
-
let name =
'张三'
-
let age =
18
-
// Vue3中不能访问到Vue2中的数据
-
function
showSetup () {
-
console.
log(
'打印setup数据里能访问到的数据');
-
console.
log(name);
-
console.
log(age);
-
console.
log(
this.
sex);
-
console.
log(
this.
height);
-
}
-
// 返回一个对象
-
return {
-
name, age, showSetup
-
}
-
}
-
}
-
</script>
注意：
1）尽量不要与Vue2.x配合使用：
Vue2.x配置(data、methods、computed...)中可以访问到setup中的属性和方法，但在setup中不能访问到Vue2.x配置(data、methods、computed...)，如果有重名，setup优先。
2）setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。
3）setup执行的时机
在beforeCreate之前执行一次，this是undefined。
4）setup的参数
props:值为对象，包含:组件外部传递过来，且组件内部声明接收了的属性。
context: 上下文对象
attrs:值为对象，包含:组件外部传递过来，但没有在props配置中声明的属性,相当this.$attrs
slots:收到的插槽内容,相当于this.$slots
emit:分发自定义事件的函数,相当于this.$emit
ref函数
定义一个响应式的数据，其语法为：const xxx = ref(initValue)。创建一个包含响应式数据的引用对象，在JS中操作数据为 xxx.value，而在模板中读取数据不需要 .value，直接<div>{{xxx}}</div>
-
<template>
-
<div>
-
<h2>姓名：{{ name }}
</h2>
-
<h2>年龄：{{ age }}
</h2>
-
<h2>工作：{{ obj.type }}
</h2>
-
<h2>薪资：{{ obj.salary }}
</h2>
-
</div>
-
<button @click="change">修改信息
</button>
-
</template>
-
<script>
-
import {ref}
from
'vue'
-
export
default {
-
name:
'MyApp',
-
setup () {
-
// 数据
-
const name =
ref(
'张三')
-
const age =
ref(
18)
-
const obj =
ref({
-
type:
'前端工程师',
-
salary:
'30k'
-
})
-
// 修改信息函数
-
function
change(
){
-
name.
value =
'李四'
-
age.
value =
20
-
obj.
value.
type =
'UI工程师'
-
obj.
value.
salary =
'20k'
-
}
-
// 返回一个对象
-
return {
-
name,age,obj,change
-
}
-
}
-
}
-
</script>
注意：
接收的数据可以是：基本类型、也可以是对象类型。
基本类型的数据：响应式依然是靠Object.defineProperty()的get和set完成的。
对象类型的数据：内部求助了Vue3的一个新函数——reactive函数
reactive函数
定义一个对象类型的响应式数据(基本类型不要用它，用ref函数)。reactive定义的响应式数据是深层次的，内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作。其语法格式为：const 代理对象 = reactive(源对象) 。接收一个对象(或数组)，返回一个代理对象(proxy对象)。
-
<template>
-
<div>
-
<h2>姓名：{{ person.name }}
</h2>
-
<h2>年龄：{{ person.age }}
</h2>
-
<h2>工作：{{ person.job.type }}
</h2>
-
<h2>薪资：{{ person.job.salary }}
</h2>
-
<h2>爱好：{{ person.hobby }}
</h2>
-
</div>
-
<button @click="change">修改信息</button>
-
</template>
-
<script>
-
import {reactive}
from
'vue'
-
export
default {
-
name:
'MyApp',
-
setup () {
-
// 数据
-
const person =
reactive({
-
name:
'张三',
-
age:
18,
-
job:{
-
type:
'前端工程师',
-
salary:
'30k'
-
},
-
hobby:[
'抽烟',
'喝酒',
'烫头']
-
})
-
// 修改信息函数
-
function
change(
){
-
person.
name =
'李四'
-
person.
age =
20
-
person.
job.
type =
'UI工程师'
-
person.
job.
salary =
'20k'
-
person.
hobby[
0]=
'学习'
-
}
-
// 返回一个对象
-
return {
-
person,change
-
}
-
}
-
}
-
</script>
reactive和ref的对比
从定义数据角度对比:
ref用来定义:基本类型数据。
reactive用来定义:对象（或数组)类型数据。
备注: ref也可以用来定义对象（或数组）类型数据,它内部会自动通过reactive转为代理对象
从原理角度对比:
ref通过 object.defineProperty()的get与set来实现响应式(数据劫持)。
reactive通过使用Proxy来实现响应式(数据劫持)﹐并通过Reflect操作源对象内部的数据。
从使用角度对比：
ref定义的数据:操作数据需要.value，读取数据时模板中直接读取不需要.value
reactive定义的数据:操作数据与读取数据:均不需要.value。
Vue3中的响应式原理
在Vue2.x的响应式中，其实现原理为：
对象类型：通过object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。
数组类型：通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。
存在问题：
新增属性、删除属性页面不会更新。
直接通过下标修改数组，界面不会自动更新。
-
<template>
-
<div>
-
<h2 v-show="person.name">姓名：{{person.name}}
</h2>
-
<h2>年龄：{{person.age}}
</h2>
-
<h2 v-show="person.sex">性别：{{person.sex}}
</h2>
-
<button @click="addSex">添加性别
</button>
-
<button @click="delName">删除姓名
</button>
-
</div>
-
</template>
-
-
<script>
-
import
Vue
from
'vue'
-
export
default {
-
name:
'MyApp',
-
data(
){
-
return {
-
person:{
-
name:
'张三',
-
age:
18,
-
}
-
}
-
},
-
methods:{
-
addSex(
){
-
// this.$set(this.person,'sex','女')
-
// 也可以用如下方式
-
Vue.
set(
this.
person,
'sex',
'女')
-
},
-
delName(
){
-
this.$delete(
this.
person,
'name')
-
}
-
}
-
}
-
</script>
在Vue3.x的响应式中，其实现原理为：
通过 Proxy（代理）：拦截对象中任意属性的变化，包括属性值的读写、属性的添加、属性的删除
通过Reflect（反射）：对被代理对象的属性进行操作。
转载：https://blog.csdn.net/qq_53123067/article/details/128543903