-
语言类型
- 静态语言类型
- 动态语言类型(编译阶段才能确定变量类型)
-
为什么需要 Typescript
-
程序更容易理解
-
效率更高
-
更少的错误
-
vue3
- 性能优化:
-
Composition API(组合式API)
- 大型项目的代码难以维护,复用逻辑不太方便
- ref 和 reactive
- computed 和 watch
- 新的生命周期
- 自定义函数 Hooks函数
- 大型项目的代码难以维护,复用逻辑不太方便
-
其他新增特性:
-
更好的 TypeScript 支持
为什么要有vue3
Vue2 遇到的问题:
- 随着功能的增长,复杂组件的代码变得难以维护
- Vue2 对 typescript 的支持非常有限(不利于集成 TS)
-
Mixin 的缺点
-
ref 的妙用
<!--
* @Description:
* @Autor: zhangbing
* @Date: 2021-09-07 18:20:36
* @LastEditors: zhangbing
* @LastEditTime: 2021-09-07 18:40:44
-->
<template>
<div>
<img alt="Vue logo" src="./assets/logo.png" />
<h1>{{ count }}</h1>
<h1>{{ double }}</h1>
<button @click="increse">+1</button>
</div>
</template>
<script lang="ts">
import { ref, computed } from "vue";
export default {
name: "App",
setup() {
const count = ref(0);
const double = computed(() => {
return count.value * 2
})
const increse = () => {
count.value++
}
return {
count,
increse,
double
};
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
- reactive
<!--
* @Description:
* @Autor: zhangbing
* @Date: 2021-09-07 18:20:36
* @LastEditors: zhangbing
* @LastEditTime: 2021-09-07 18:50:17
-->
<template>
<div>
<img alt="Vue logo" src="./assets/logo.png" />
<h1>{{ count }}</h1>
<h1>{{ double }}</h1>
<button @click="increse">+1</button>
</div>
</template>
<script lang="ts">
import { ref, computed, reactive, toRefs } from "vue";
interface DataProps {
count: number;
double: number;
increse: () => void;
}
export default {
name: "App",
setup() {
// const count = ref(0);
// const double = computed(() => {
// return count.value * 2
// })
// const increse = () => {
// count.value++
// }
const data: DataProps = reactive({
count: 0,
increse: () => {
data.count++;
},
double: computed(() => data.count * 2),
});
// toRefs 接收一个 reactive 对象,转换成普通的响应式对象(避免丧失响应性)
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
-
ref 和 reactive 的区别
-
总结:
- 所有场景都可以使用 reactive,但是要记得使用 toRefs 保证reactive对象属性保证响应性
- ref 一般传入的原始类型
- reactive 传入的是对象
-
Vue3 的响应式原理
Proxy
-
Vue3 生命周期
onMounted(() => { console.log("onMounted"); }); onUpdated(() => { console.log("onUpdated"); }); onRenderTriggered((event) => { console.log(event); });
-
侦听器 watch : 监听响应式数据的变化
<!-- * @Description: * @Autor: zhangbing * @Date: 2021-09-07 18:20:36 * @LastEditors: zhangbing * @LastEditTime: 2021-09-07 22:23:25 --> <template> <div> <img alt="Vue logo" src="./assets/logo.png" /> <h1>{{ count }}</h1> <h1>{{ double }}</h1> <ul> <li v-for="number in numbers" :key="number"> <h1>{{ number }}</h1> </li> <h1>{{ person.name }}</h1> </ul> <button @click="increse">+1</button> <br /> <button @click="updateGreeting">updateTitle</button> </div> </template> <script lang="ts"> import { ref, computed, reactive, toRefs, onMounted, onUpdated, onRenderTriggered, watch, } from "vue"; interface DataProps { count: number; double: number; increse: () => void; numbers: number[]; person: { name?: string }; } export default { name: "App", setup() { // const count = ref(0); // const double = computed(() => { // return count.value * 2 // }) // const increse = () => { // count.value++ // } onMounted(() => { console.log("onMounted"); }); onUpdated(() => { console.log("onUpdated"); }); onRenderTriggered((event) => { console.log(event); }); const data: DataProps = reactive({ count: 0, increse: () => { data.count++; }, double: computed(() => data.count * 2), numbers: [0, 1, 2], person: {}, }); data.numbers[0] = 5; data.person.name = "zhangbing"; // toRefs 接收一个 reactive 对象,转换成普通的响应式对象 const refData = toRefs(data); const greetings = ref(""); const updateGreeting = () => { greetings.value += "Hello"; }; // document.title = "updated" + greetings.value; const greeting = () => { document.title = "updated" + greetings.value; }; /* watch([greetings, data], (newValue, oldValue) => { console.log('old', oldValue); console.log('new', newValue); document.title = "updated" + greetings.value + data.count }); */ // 侦听器 watch:监控响应式数据的变化 watch([greetings, () => data.count], (newValue, oldValue) => { console.log("old", oldValue); console.log("new", newValue); document.title = "updated" + greetings.value + data.count; }); return { ...refData, updateGreeting, }; }, }; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>