-
Vue3的computed计算属性和watch监视(四)
一、computed计算属性
- 姓:名:全名{{full_name}}全名{{full_name}}
二、watch监视
1、场景一
监视【ref】定义的【基本数据】类型
场景1:监视【ref】定义的【基本数据】类型
sum的值: {{sum}}
2、场景二
监视【ref】定义的【对象类型】数据
情况二：监视【ref】定义的【对象类型】数据
姓名: {{person.name}}年龄: {{person.age}}
3、场景三
监视【reactive】定义的【对象类型】数据
- <div class="person">
- <h1>情况三：监视【reactive】定义的【对象类型】数据h1>
- <h2>姓名：{{ person.name }}h2>
- <h2>年龄：{{ person.age }}h2>
- <button @click="changeName">修改名字button>
- <button @click="changeAge">修改年龄button>
- <button @click="changePerson">修改整个人button>
- <hr>
- <h2>测试：{{obj.a.b.c}}h2>
- <button @click="test">修改obj.a.b.cbutton>
- div>
- template>
- <script lang="ts" setup name="Person">
- import {reactive,watch} from 'vue'
- // 数据
- let person = reactive({
- name:'张三',
- age:18
- })
- let obj = reactive({
- a:{
- b:{
- c:666
- }
- }
- })
- // 方法
- function changeName(){
- person.name += '~'
- }
- function changeAge(){
- person.age += 1
- }
- function changePerson(){
- Object.assign(person,{name:'李四',age:80})
- }
- function test(){
- obj.a.b.c = 888
- }
- // 监视，情况三：监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的
- watch(person,(newValue,oldValue)=>{
- console.log('person变化了',newValue,oldValue)
- })
- watch(obj,(newValue,oldValue)=>{
- console.log('Obj变化了',newValue,oldValue)
- })
- script>
- <style scoped>
- .person {
- background-color: skyblue;
- box-shadow: 0 0 10px;
- border-radius: 10px;
- padding: 20px;
- }
- button {
- margin: 0 5px;
- }
- li {
- font-size: 20px;
- }
- style>
与场景二不同的是，newVal和oldVal是一样的，表明通过Object.assign重新赋值的时候，并不是生成一个新的对象，而是新的值覆盖了旧值
4、场景四
监视【ref】或者【reactive】定义的【对象类型】数据的某个属性(基本数据类型或者对象类型-都建议写成函数形式)
情况四：监视【ref】或者【reactive】定义的【对象类型】数据的某个属性
姓名: {{person.name}}年龄: {{person.age}}家人: {{person.family}}
5、场景五
监视上述多个数据
情况五：监视上述多个数据
姓名: {{person.name}}年龄: {{person.age}}家人: {{person.family}}
-
相关阅读:
ubuntu server 更改时区：上海
Linux: vi 编辑器
Python编辑器和Pycharm的傻瓜式安装部署
若依前后端不分离-表单中某一列是其他几列计算的结果
Vitalik：探索公共物品资金分配优先次序-Revenue-Evil 曲线
【Vue】Vue全家桶（九）Vue3
Jquery
国庆假期买哪款耳机好？国庆假期必备蓝牙耳机推荐
二叉搜索树迭代器
疫苗预约系统,疫苗接种管理系统,疫苗预约管理系统毕设作品
- 原文地址：https://blog.csdn.net/weixin_37901366/article/details/136159333
