生命周期
vue2.x生命周期钩子函数
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
vue3 生命周期钩子函数
setup创建实例前onBeforeMount挂载DOM前onMounted挂载DOM后onBeforeUpdate更新组件前onUpdate更新组件后onBeforeUnmount卸载销毁前onUnmounted卸载销毁后
演示
<template>
<div class="container">click</div>
</template>
<script>
import { onBeforeMount, onMounted } from "vue"
export default {
name: 'App',
// 1. 组合API的起点，将来的组合API的代码基本上都写在这里
setup () {
// DOM渲染前钩子
onBeforeMount(() => {
console.log("DOM渲染前钩子", document.querySelector('.container'));
})
// DOM渲染后钩子
onMounted(() => {
console.log("DOM渲染后钩子", document.querySelector('.container'));
})
return { }
},
}
</script>
Console
DOM渲染前钩子 null
DOM渲染后钩子 <div class="container">click</div>
setup
<template>
<div @click="say()">click</div>
</template>
<script>
export default {
name: 'App',
// 1. 组合API的起点，将来的组合API的代码基本上都写在这里
setup () {
const say = () => {
console.log('hi vue3');
}
return { say }
},
}
</script>
reactive
Vue3.0 ref、reactive、toRef、toRefs、customRef的区别 - 简书
定义响应式数据
<template>
<div class="container">
<ul>
<li>{{obj.name}}</li>
<li>{{obj.age}}</li>
</ul>
<button @click="changeAge">changeAge</button>
</div>
</template>
<script>
import { reactive } from "vue"
export default {
name: 'App',
setup () {
const obj = reactive({
name: 'jack',
age: 100
})
const changeAge = () => {
obj.age = 18
}
return { obj, changeAge }
},
}
</script>
toRef
在模板中只使用age数据
toRef用于为源响应式对象上的属性新建一个ref，从而保持对其源对象属性的响应式连接。接收两个参数：源响应式对象和属性名，返回一个ref数据。例如使用父组件传递的props数据时，要引用props的某个属性且要保持响应式连接时就很有用。
<template>
<div class="container">
<ul>
<li>{{age}}</li>
</ul>
<button @click="changeAge">changeAge</button>
</div>
</template>
<script>
import { reactive, toRef } from "vue"
export default {
name: 'App',
// 1. 组合API的起点，将来的组合API的代码基本上都写在这里
setup () {
const obj = reactive({
name: 'jack',
age: 100
})
// 只想使用age数据
const age = toRef(obj, 'age')
const changeAge = () => {
age.value = "1000"
}
return { changeAge, age }
},
}
</script>
toRefs
toRefs 转换响应式对象中所以属性为单独响应式数据，对象为普通数据
<template>
<div class="container">
<ul>
<li>{{ name }}</li>
<li>{{ age }}</li>
</ul>
<button @click="changeObj">changeObj</button>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
export default {
name: "App",
setup() {
const obj = reactive({
name: "jack",
age: 100,
});
const robj = toRefs(obj);
const changeObj = () => {
(robj.age.value = 10), (robj.name.value = "Davis");
};
return { changeObj, ...robj };
},
};
</script>
ref
ref 常用于定义简单数据类型的响应式数据
<template>
<div class="container">
<div>{{ name }}</div>
<div>{{ age }}</div>
<button @click="updateName">修改数据</button>
</div>
</template>
<script>
import { ref } from "vue";
export default {
name: "App",
setup() {
const name = ref("Jack");
const age = ref(100);
const updateName = () => {
name.value = "li";
};
return { name, age, updateName };
},
};
</script>
computed
computed计算属性 当需要依据现有的响应式数据，根据逻辑得到一个新的数据
<template>
<div class="container">
<div>今年: {{ age }}岁</div>
<div>明年: {{ newAge }}岁</div>
</div>
</template>
<script>
import { computed, ref} from "vue";
export default {
name: "App",
setup() {
const age = ref(17);
const newAge = computed(() => {
return age.value + 1;
});
return { age, newAge };
},
};
</script>
让计算属性支持数据双向绑定
<template>
<div class="container">
<div>今年: {{ age }}岁</div>
<div>明年: {{ newAge }}岁</div>
<input type="text" v-model="newAge" />
</div>
</template>
<script>
import { computed, ref } from "vue";
export default {
name: "App",
setup() {
const age = ref(17);
const newAge = computed({
// 获取计算属性的值
get() {
return age.value + 1;
},
// 监听计算属性改变
set(value) {
age.value = value - 2;
},
});
return { age, newAge };
},
};
</script>
watch
监听数据的变化
<template>
<div class="container">
<button @click="changeValue">changeValue</button>
</div>
</template>
<script>
import { reactive, ref, watch } from "vue";
export default {
name: "App",
setup() {
const name = ref("wei");
const obj = reactive({
status: 200,
context: "good",
});
const changeValue = () => {
name.value = "nil";
obj.status = 400;
};
// // 监听一个数据
// watch(name, () => {
// console.log("name is changed");
// });
// // 监听一个reactive数据
// watch(obj, () => {
// console.log("obj is changed");
// }, {
// 深度监听
// deep: true
// 默认执行
// immediate: true
// });
// 监听多个数据
watch([name, obj], () => {
console.log("name and obj is changed");
});
// 监听对象中的某一个属性的变化
// 需要写出函数返回该属性的方式才能检查到
watch(
() => obj.status,
() => {
console.log("obj.status is changed");
}
);
return { name, changeValue };
},
};
</script>
ref属性
<template>
<div class="container">
<div ref="box">box</div>
<ul>
<li v-for="i in 5" :key="i" :ref="setLi">{{ i }}</li>
</ul>
</div>
</template>
<script>
import { ref } from "vue";
export default {
name: "App",
setup() {
// 获取单个元素
const box = ref(null);
console.log(box);
// 获取多个元素
const lis = [];
const setLi = (el) => {
lis.push(el);
};
return { box, setLi };
},
};
</script>