vue3.0-个人学习笔记

快速上手
1. 全局安装vue-cli（终端输入npm install -g @vue/cli或者yarn global add @vue/cli 后者更快）
检查是否安装成功（终端输入vue -V或者vue --version）
2. 创建vue3test 文件
3.创建成功，cd vue3test文件，打开终端 输入vue create vue-next-test 或者 vue gui 可以以页面的形式选择项目构成的内容组件

4. 最后 根据终端反馈的命令行 运行你的第一个vue3.0项目了啦
 注意（另一个快速构建方法）： 可以采用 模板进行构建  npm init vite-app vite_test

一、更好的TypeScript 支持

二、新的Api加入
1.Teleprot 瞬移组件
是什么？
瞬间移动的函数/方法，用标签进行包裹，to属性就是需要渲染的Dom Id了
作用？
Dialog被包裹在其它组件之中，容易被干扰
样式也在其它组件中，容易变得非常混乱
怎么用？
代码

JSPang11

作用效果

这时候在浏览器中预览，就会发现，现在组件已经挂载到model节点上了，这就是teleport组件的使用了 2. Suspense 解决异步加载组件问题 注意：如果你要使用Suspense的话，要返回一个promise对象，而不是原来的那种JSON对象 代码案例 1.新建一个文件

{{ result }}

2. -引入组件 import AsyncShow from "./components/AsyncShow.vue"; -注入componens - 页面渲染

import { defineComponent, ref } from “vue”;
export default defineComponent({
name: “App”,
setup() {
const girls = ref([“大脚”, “刘英”, “晓红”]);
const selectGirl = ref(“”);
const selectGirlFun = (index: number) => {
selectGirl.value = girls.value[index];
};
//因为在模板中这些变量和方法都需要条用，所以需要return出去。
return {
girls,
selectGirl,
selectGirlFun,
};
},
});

3. 注意的点： setUp函数中改变和读取一个值得时候，还要加上value,怎么优化呢？
需要引入一个reactive Api来解决冗余无聊操作
4. ref函数
1. 是个神奇的函数
2. ref函数和reactive函数都是生成响应式对象，目前来看只是编写上有所不同。
2.如果要想在模板中 使用它 则需要包装一下才可以
3. 使用方法 ref() 如 const demo = ref([1,2,3,4])/ref(‘’)
5.reactive 函数
1. ref函数和reactive函数都是生成响应式对象，目前来看只是编写上有所不同。

1. 引入 import {ref， reactive} from ‘vue’

2. setup() {
   const data = reactive({
   girls: [“大脚”, “刘英”, “晓红”],
   selectGirl: “”,
   selectGirlFun: (index: number) => {
   data.selectGirl = data.girls[index];
   },
   });

   return {
   data,
   };
   注意： 渲染模板的时候 需要加上data 变量 如{data.selectGirl}
   toRefs（）优化setup(){}
   1.引入 import { toRefs } from ‘vue’

3. setup() {
   const data: DataProps = reactive({
   girls: [“大脚”, “刘英”, “晓红”],
   selectGirl: “”,
   selectGirlFun: (index: number) => {
   data.selectGirl = data.girls[index];
   },
   });
   const refData = toRefs(data);

   return {
   …refData,
   };
   },
   注意：上述方法在模板渲染的时候 就可以直接写变量名字了 {selectGirlFun} 优化了书写
   watch 函数
   1. 对比： 捆绑服务 简单快捷 方便

4. 使用：
   引入 imoport { watch } from ‘vue’
   以数组形式，监听多个data
   watch([overText, data.selectGirl],
   (newValue, oldValue) => {
   console.log(new--->${newValue});
   console.log(old--->${oldValue});
   document.title = newValue[0]; //返回的
   newValue也是一个数组
   });
   3.注意：有人会说Vue3不能监听reactive里边的值是不是一个Bug，我想说的这并不是Bug，而是为了保持和Vue2的一致性，因为在Vue2中也时这种结果，解决方案是要么是ref或者这种get/set方法的形式。要么你你开启设置watchOptions的deep为true，也就是深度监听模式

三、采用渐进式开发，向下兼容

五、Composition API 集合，解决VUE2.0组件开发问题
1.nextTick使用(ES模块构建的命名导出方式访问全局API)
import { nextTick } from ‘vue’
nextTick(()=>{
// something code
})
独立模块化的使用 （与mixins vue2.0对比）
1. 在hooks 文件夹里面建立一个文件
2. import { ref } from ‘vue’
const nowTime = ref(‘’)
export {nowTime}
3. 在使用的文件里面 先引入 import { nowTime} from ‘./’
4. 然后 一定要return {nowTime} 才可以使用哦

分支主题 6

四、性能的提升
vue2与3对比
1.打包大小减少41%
2. 初次渲染快55%
3.内存使用减少54%
vue 目前可做的优化
●keep-alive缓存页面
●使用v-show复用DOM
●v-for 遍历避免同时使用 v-if
●长列表性能优化
●事件的销毁
●图片懒加载
●第三方插件按需引入
●无状态的组件标记为函数式组件
●子组件分割
●变量本地化
●SSR

生命周期2.0与3.0
对比： Vue2--------------vue3
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> ✨onBeforeUnmount
destroyed ->✨ onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured
子主题 3
vue3.0 生命周期在调用前需要先进行引入 import {} from ‘vue’
setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
onBeforeMount() : 组件挂载到节点上之前执行的函数。
onMounted() : 组件挂载完成后执行的函数。
onBeforeUpdate(): 组件更新之前执行的函数。
onUpdated(): 组件更新完成之后执行的函数。
onBeforeUnmount(): 组件卸载之前执行的函数。
onUnmounted(): 组件卸载完成后执行的函数
onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行。
onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。
onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数（以后用到再讲，不好展现）。
新增❤️ 两个调试工具 方便快速解决问题
onRenderTracked (event=>{}): 状态跟踪，根据页面上所有响应式变量和方法的状态（即return返回的数据）都会进行跟踪，只要有update 的情况，就会跟踪，生成一个event对象来查找问题所在，
组件更新才会执行，没有更新则不进行跟新
onRenderTriggered(event=>{}): 状态触发，不会跟踪每一个值，而是给你变化值的信息，并且新值和旧值都会明确表示
event对象参数解释：
key 那边变量发生了变化

• newValue 更新后变量的值
• oldValue 更新前变量的值
• target 目前页面中的响应变量和函数