setup函数:
- 新的option,所有的组合api函数都在此使用,只有在初始化时执行一次
<template>
<div>
哈哈,我有变帅了
</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
console.log('woshinidie')
},
})
</script>
后台输出:
使用到这,这个函数有点vue2.0中生命周期函数created的味道了
- 函数如果返回对象,对象中的属性或方法,模板中可以直接使用
ref实现响应式:
ref是一个函数,作用:定义一个响应式的数据,返回的是一个ref对象,对象中有一个value属性,用来处理基本数据类型,如果用ref对象/数组,内部自动会将对象/数组转换为reactive的代理对象
如果需要对数据进行操作,需要使用该ref对象调用value属性的方式进行操作
<script>
import { defineComponent,ref } from 'vue'
export default defineComponent({
// 需求:页面打开后可以直接看到一个数据,点击按钮后,该数据可以发生变化
setup() {
let number = ref(0)
function updateNumber() {
number.value ++
}
return {
number,
updateNumber
}
},
})
</script>
html模板中是不需要使用.value属性的写法
<template>
<div>
哈哈,我有变帅了
<h2>{{number}}</h2>
<button @click="updateNumber">点击加1</button>
</div>
</template>
reactive作用:定义多个数据的响应式
const proxy = reactive(obj);接收一个普通对象然后返回该普通对象的响应式代理器对象
<template>
<div>
<h2>姓名:{{user.name}}</h2>
<h2>年龄:{{user.age}}</h2>
<h2>媳妇:{{user.wife}}</h2>
<button @click="updateUser">更新用户信息</button>
</div>
</template>
<script>
import { defineComponent,reactive,ref } from 'vue'
export default defineComponent({
// 需求:显示用户的相关信息,点击按钮,可以更新用户的相关信息数据
setup() {
const user = reactive({
name:'小明',
age:16,
wife:{
name:'小花',
age:16,
cars:['奔驰','宝马']
}
})
const updateUser = () => {
user.name = '笑红尘',
user.age ++
}
console.log(user)
return {
user,
updateUser
}
}
})
</script>
效果:
const user = reactive(obj)
(1)uesr对象或者obj对象添加一个新的属性,哪一种方式会影响界面的更新
(2)user对象或者obj对象中移除一个已经存在的属性,哪一种方式会影响界面的更新