ref/reactive
ref函数创建单个数据的响应式对象
?ref函数可以把数据创建成为ref对象，只要是ref对象，那么就一定是响应式
?ref创建单个值的响应式对象
?ref对象，在模板用的时候会自动拿value，不需要你去.value
?ref对象，在js当中修改的时候，需要.value
<template>
<h2>{{ msg }}</h2>
<button @click="update">给我变！</button>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "About",
});
</script>
<script lang="ts" setup>
import { ref } from "vue";
let msg = ref('我是哈哈哈');
function update() {
msg.value = '我成为了嘿嘿嘿';
}
</script>ref传递对象
如果使用ref传递一个对象，本质内部也是在使用reactive
ref传递对象，那么返回的仍然是ref对象，它的value是代理对象
<template>
<h2>{{ state.name }}</h2>
<button @click="update">给我变！</button>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "About",
});
</script>
<script lang="ts" setup>
import { ref } from "vue";
const state = ref({
name: '啊哈',
hobby: '诶嘿'
})
function update(){
state.value.name = '1111'
}
</script>
reactive
reactive是用来对一个对象创建代理对象，代理对象也是响应式的
reactive创建的代理对象，直接通过.语法去操作，不需要.value
不能传递非对象数据
<template>
<h2>{{ msg.name }}</h2>
<button @click="update">给我变！</button>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "About",
});
</script>
<script lang="ts" setup>
import { reactive } from "vue";
let msg = reactive({
name: '我是哈哈哈'
});
function update() {
msg.name = '我成为了嘿嘿嘿';
}
</script>toRefs
默认代理对象被解构，数据将失去响应能力
如果非要去解构，并且保证响应能力依然存在，需要使用toRefs方法
把state内部所有的属性全部转化为ref对象
解构出来不再是基本值，而是ref对象，就有响应式能力
<template>
<h2>{{ state.name }}</h2>
<h2>{{ state.hobby }}</h2>
<button @click="update">给我变！</button>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue";
export default defineComponent({
name: "About",
});
</script>
<script lang="ts" setup>
import { ref, toRefs } from "vue";
const state = reactive({
name: '啊哈',
hobby: '诶嘿'
})
let result = toRefs(state)
console.log(result);
let {name, hobby} = result
console.log(name, hobby);
function update(){
state.name = '1111',
state.hobby = '2222'
}
console.log(state);
</script>计算属性
<template>
count: {{count}}
<br>
double: {{double}}
<br>
trible: <input type="text" v-model="trible">
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "About",
});
</script>
<script lang="ts" setup>
import { ref, computed } from 'vue'
const count = ref(100)
//数据只是为了读取
const double = computed(() => {
return count.value * 2
})
//既可读又可写
const trible = computed({
get(){
return count.value * 3
},
set(val){
console.log(val);
count.value /= 2
}
})
</script>监视
计算属性和watch监视都必须先保证数据是响应式数据才能进行?
<template>
<button @click="update">点击修改</button>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue";
export default defineComponent({
name: "About",
});
</script>
<script lang="ts" setup>
import { ref, watch } from "vue";
const msg = ref("饿了但不想吃饭");
const data = ref({
a: 100,
b: 200,
});
const state = reactive({
name: "动漫",
num: 1000,
collection: [
{ id: 1, name: "海贼王" },
{ id: 2, name: "火影忍者" },
],
});
function update() {
msg.value = "好饿啊",
data.value.a = 300,
state.collection.push({ id: 3, name: "犬夜叉" })
state.name = '看看就看看'
}
watch(msg, (newVal, oldVal) => {
console.log(newVal, oldVal);
});
watch(() => data.value.a,(newVal, oldVal) => {
console.log(newVal, oldVal);
}
);
watch(() => state.name,(newVal, oldVal) => {
console.log(newVal, oldVal);
}
);
// 监视数组变化，地址不变只是修改数组内部的长度或者数据，监视不到
// 以后监视数组数据一定要深度监视
watch(() => state.collection,(newVal, oldVal) => {
console.log(newVal, oldVal);
},{ deep: true });
</script>
? 一、ref(基本值)
? const msg = ref(100)
? watch(msg,(0 => {})) //不能写msg.value
? 监视ref对象，默认监视的就是.value，监视的时候不能写.value，写了就是在监视
? 一个基本值，就不是响应式，报错
? 二、ref(对象)
? const data = ref({
? ? a:100,
? ? b:200
? })
? data也是ref对象。data.value是一个代理对象
? 如果监视ref对象data，默认监视也是.value，监视代理对象的地址,代理对象内部数据发生变化，需要加深度监视
? 如果你修改代理对象的地址，可以监视到，但是代理对象没了，修改的新对象不是响应式
? 一般监视不监视ref对象本身（除非要深度监视代理对象内部数据）
? 监视单个ref对象内的代理对象数据 ref.value.xxx,就得写成回调 () => ref.value.xxx
? 三、reactive(对象)
? 返回的就是代理对象
? 监视直接监视的是代理对象本身，监视就是代理对象地址，
? 监视地址发生变化，或者深度监视代理对象内部所有数据发生变化
? 监视地址发生变化，同样修改了以后不再是响应式对象了，所以一般监视不监视代理对象本身
Vue3响应式原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let obj = {
name:'赵丽颖',
age:35
}
const proxyObj = new Proxy(obj, {
// 操作代理对象的所有捕捉器（增删改查）
get(target, property) {
console.log('获取捕捉器执行',target,property);
// 读取捕捉器，如果用户后期在读取代理对象的属性
// 那么就会被此捕捉器捕捉
return Reflect.get(target, property)
},
set(target, property, value) {
console.log('设置捕捉器执行',target,property);
// 设置捕捉器，如果用户以后给代理对象添加或者修改属性
// 那么就会被此捕捉器捕捉
Reflect.set(target, property, value)
},
deleteProperty(target, property) {
console.log('删除捕捉器执行',target,property);
// 删除捕捉器，如果用户后期通过代理对象删除某个属性
// 那么就会被此捕捉器捕捉
Reflect.deleteProperty(target, property)
}
})
console.log(proxyObj.name);
proxyObj.heihei = '哈哈'
console.log(obj,proxyObj);
delete proxyObj.name
console.log(obj,proxyObj);
</script>
</body>
</html>Vue3生命周期
?vue3配置项生命周期写法只是修改了vue2最后的两个钩子名称
? ? beforeCreate(){ },
? ? created(){ },
? ? beforeMount(){ },
? ? mounted(){ },
? ? beforeUpdate(){ },
? ? updated(){ },
? ? beforeUnmount(){ },
? ? unmounted(){ }
?vue3组合api生命周期写法
? ? setup(){
? ? ? onBeforeMount(() => { })
? ? ? onMounted(() => {? })
? ? ? onBeforeUpdate(() => { })
? ? ? onUpdated(() => { })
? ? ? onBeforeUnmount(() => { })
? ? ? onUnmounted(() => { })
?}