Vue2とVue3での計算と監視の使用と違い
1.計算
Vue2：
<template>
<div>
<span>姓：{
{
firstName }}</span>
<br />
<span>名：{
{
lastName }}</span>
<br />
<span>全名：{
{
fullName }}</span>
<br />
全名：<input type="text" v-model="fullName" />
</div>
</template>
<script>
export default {
data() {
return {
firstName: "戴",
lastName: "Dai",
};
},
computed: {
/*简写（如果不需要对fullName进行修改） */
// fullName: function () {
// return this.firstName + "-" + this.lastName;
// },
/*完整方式 */
fullName: {
get() {
return this.firstName + "-" + this.lastName;
},
set(val) {
const nameArr = val.split("-");
this.firstName = nameArr[0];
this.lastName = nameArr[1];
},
},
},
};
</script>
Vue3：
<template>
<div>
<span>姓：{
{
firstName }}</span>
<br />
<span>名：{
{
lastName }}</span>
<br />
<span>全名：{
{
fullName }}</span>
<br />
全名：<input type="text" v-model="fullName" />
</div>
</template>
<script lang="ts">
import {
computed, defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
setup() {
const state = reactive({
firstName: "戴",
lastName: "Dai",
});
/*简易写法（不需要对内容进行修改） */
// let fullName = computed(() => state.firstName + "-" + state.lastName);
/*完整写法 */
let fullName = computed({
get() {
return state.firstName + "-" + state.lastName;
},
set(val: any) {
const nameArr = val.split("-");
state.firstName = nameArr[0];
state.lastName = nameArr[1];
},
});
return {
...toRefs(state),
fullName,
};
},
});
</script>
二、見る
Vue2：
<template>
<div>
<h1>{
{
weather }}</h1>
<button @click="isHot = !isHot">切换</button>
</div>
</template>
<script>
export default {
data() {
return {
weather: "炎热",
isHot: true,
};
},
watch: {
/**简写 */
// isHot(newValue, oldValue){
// console.log("修改了isHot", newValue, oldValue);
// },
/*完整写法*/
isHot: {
immediate: true,
handler(newValue, oldValue) {
console.log("修改了isHot", newValue, oldValue);
this.weather = this.isHot === true ? "炎热" : "寒冷";
},
},
},
};
</script>
Vue3：
<template>
<div>
<h1>{
{
weather }}</h1>
<button @click="isHot = !isHot">切换</button>
</div>
</template>
<script lang="ts">
import {
defineComponent, reactive, toRefs, watch } from "vue";
export default defineComponent({
setup() {
const state = reactive({
weather: "炎热",
isHot: true,
});
watch(
() => state.isHot,
(newValue, oldValue) => {
console.log("修改了isHot", newValue, oldValue);
state.weather = state.isHot === true ? "炎热" : "寒冷";
},
{
//属性定义
immediate: true,
}
);
return {
...toRefs(state),
};
},
});
</script>
3.違い
1.キャッシングをサポートしていますか？
Computed（計算されたプロパティ）はキャッシュをサポートします。依存データが変更されていない場合は、キャッシュから直接読み取られます。依存データが変更されている場合は、再計算されます。
watch（リッスンプロパティ）はキャッシュをサポートしていません。データが変更または再レンダリングされると、対応する操作がトリガーされ、キャッシュはありません。
2.非同期をサポートするかどうか
computed能完成的操作，watch都能完成，但是异步操作，只有watch能完成。
/*Vue3*/
watch(
() => state.isHot,
(newValue, oldValue) => {
console.log("修改了isHot", newValue, oldValue);
setTimeout(() => {
state.weather = state.isHot === true ? "炎热" : "寒冷";
}, 1000);
},
{
//属性定义
immediate: true,
}
);
/*Vue3*/
/*简易写法（不需要对内容进行修改） */
let fullName = computed(() => {
setTimeout(() => {
state.firstName + "-" + state.lastName;
}, 1000);
});
会直接报错，所以computed中不能进行异步操作！！！
上記は、Vue2とVue3での計算と監視の使用法と違いです。「フロントエンドインタビューの質問」列に注意してください。
私の通常のプロジェクトに共通する問題と筆記試験の知識を共有し、CSDNであなたと面接し、一緒に進歩します。さあ。