绍兴建设网站,flash网站建设技术精粹,做网站需要哪些审核,织梦模板官网从一名测试转战到全栈是否可以自学做到#xff0c;很多朋友肯定会说不可能#xff0c;或就算转了也是个一般水平#xff0c;我很认同#xff0c;毕竟没有经过各种项目的摧残#xff0c;但是还是得踏足一下这个领域。所以今天和大家分享vue3中的相关内容#xff0c;大佬勿… 从一名测试转战到全栈是否可以自学做到很多朋友肯定会说不可能或就算转了也是个一般水平我很认同毕竟没有经过各种项目的摧残但是还是得踏足一下这个领域。所以今天和大家分享vue3中的相关内容大佬勿喷。
一计算属性
案例1计算属性且是只读
script langts setup namePerson
import { ref, computed } from vue
let firstName ref(张)
let lastName ref(三)// 计算属性且是只读
let fullName computed(() {return firstName.value.slice(0, 1).toUpperCase() firstName.value.slice(1) - lastName.value.slice(0, 1)
})
/script
案例2计算属性可读可写
script langts setup namePerson
import { ref, computed } from vue
let firstName ref(张)
let lastName ref(三)// 计算属性可读可写
let fullName_rw computed({get() {return firstName.value.slice(0, 1).toUpperCase() firstName.value.slice(1) - lastName.value.slice(0, 1)},set(val) {const [str1, str2] val.split(-)firstName.value str1lastName.value str2}
})
function changeName() {fullName_rw.value 李-四
}
/script
对于计算属性一般与get()和set()一起使用
二watch属性
作用监视数据的变化和vue2的watch租用一致
特点vue3中的watch只能监视以下四种数据 1、ref定义的数据【一个是基本类型一个是对象类型】 2、reactive定义的数据 3、函数返回一个值(getter函数) 4、一个包含上述内容的数组
关于watch一共有五种情况
情况一监视ref定义的基本数据类型
templatediv classpersonh2当前求和为{{ sum }}/h2button clickchangeSum点我sum1/button/div
/templatescript langts setup namePerson1
import { ref, watch } from vue
// 定义数据
let sum ref(0)function changeSum() {sum.value
}
//监视ref定义的基本数据这里监视的就是sum
const stopwatch watch(sum, (newvalue, oldvalue) {console.log(newvalue, oldvalue);//解除监视,当sum的值大于等于10时运行解除if (sum.value 10) {stopwatch()}
})/script
情况二监视ref定义的对象类型的数据
templatediv classpersonh1情况2监视ref定义的对象类型/h1h2姓名{{ person.name }}/h2h2年龄{{ person.age }}/h2button clickchangeName修改名字/buttonbutton clickchangeAge修改按钮/buttonbutton clickchangePerson修改整个人/button/div
/templatescript langts setup namePerson1
import { ref, watch } from vue
// 监视ref定义的对象类型直接写数据名监视的是对象的【地址值】若想见识对象内部的数据要手动开启深度监视
// immediate: true, 立即执行
// deep: true, 深度监视
let person ref({name: alex,age: 18
})
// 方法
function changeName() {person.value.name ~
}
function changeAge() {person.value.age
}
function changePerson() {person.value {name: 李四,age: 20}
}
//监视ref定义的【对象类型】数据监视的是对象的地址值
watch(person, (newvalue, oldvalue) {console.log(newvalue, oldvalue);
}, { deep: true, immediate: true })
/*
注意
1、如果修改的是ref定义的对象中的属性newvalue和oldvalue都是新值因为它们是同一个对象
2、如果修改整个ref定义的对象newvalue是新值oldvalue是旧值因为不是同一个对象了
*/
/script
情况三监视reactive定义的对象类型
templatediv classpersonh2情况3监视reactive定义的对象类型/h2h2姓名{{ person.name }}/h2h2年龄{{ person.age }}/h2button clickchangeName1修改名字/buttonbutton clickchangeAge1修改按钮/buttonbutton clickchangePerson1修改整个人/button/div
/templatescript langts setup namePerson1
import { ref, watch, reactive } from vue//情况三监视reactive定义的对象类型数据且默认开启深度监视
function changeName1() {person1.name ~
}
function changeAge1() {person1.age
}
//reactive不能整体修改所以下面是无法执行的
function changePerson1() {// person1 {// name: 李四,// age: 20// }//下面是强制修改但是不是把整个对象修改Object.assign(person1, {name: 李四111,age: 28})
}
//监视情况三监视【reactive】定义的【对象类型】数据且默认是开启深度监视的
watch(person1, (newvalue, oldvalue) {console.log(person1变化了);console.log(newvalue, oldvalue);
})
/script
情况四监视ref或reactive定义的【对象类型】数据中的某个属性
1、若该属性值不是【对象类型】需要写成函数形式
2、若该属性值依然是【对象类型】可直接编也可写成函数不过建议写成函数
templatediv classpersonh2姓名{{ person.name }}/h2h2年龄{{ person.age }}/h2h2车{{ person.car.C1 }}-{{ person.car.C2 }}/h2button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickchangeCar1修改第一台车/buttonbutton clickchangeCar2修改第二台车/buttonbutton clickchangeCar修改整个车/button/div
/templatescript langts setup namePerson1
import { reactive, watch } from vue
//数据
let person reactive({name: 张三,age: 18,car: {C1: 奔驰,C2: 宝马}
})
// 监视响应式对象中的某个属性且该属性是基本类型要写成函数式
watch(() person.name, (newvalue, oldvalue) {console.log(person.name变化了, newvalue, oldvalue);
},{deep:true})
/script
情况五监视多个数据
templatediv classpersonh2姓名{{ person.name }}/h2h2年龄{{ person.age }}/h2h2车{{ person.car.C1 }}-{{ person.car.C2 }}/h2button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickchangeCar1修改第一台车/buttonbutton clickchangeCar2修改第二台车/buttonbutton clickchangeCar修改整个车/button/div
/templatescript langts setup namePerson1
import { reactive, watch } from vue
//数据
let person reactive({name: 张三,age: 18,car: {C1: 奔驰,C2: 宝马}
})
// 如果是对象之类的就不用改为函数式了比如person.car
watch([() person.name, () person.car.C1, person.car], (newvalue, oldvalue) {console.log(改动了, newvalue, oldvalue);}, { deep: true })
