Vue3 + TS(二)

Vue3 + TS(二)

Vue3

vue3的新特性

• 首先是向下兼容，Vue3 支持大多数 Vue2 的特性。

• 性能的提升，内存减少55%、打包大小减少41%、渲染快、使用Proxy实现数据响应式，重构虚拟dom

• 新推出的Composition API(组合 api)，在 Vue2 中遇到的问题就是复杂组件的代码变的非常麻烦，甚至不可维护。说白了就是封装不好，重用不畅。

• 其他新特性：Teleport(瞬移组件)、Suspense(解决异步加载组件问题)和全局 API 的修改和优化。

• 更好TypeScript支持。

创建vue3项目

1. 在黑窗口输入：vue create 项目名
2. 选择手动选择功能：
   
3. 选择你所需要的功能：
   
4. 选择vue版本
   
5. 选择TypeScript后，会询问 更细节的配置：
   是否使用class风格的组件语法：Use class-style component syntax?
   是否使用babel做转义：Use Babel alongside TypeScript for auto-detected polyfills?
6. 选择ESLint + Prettier
   
7. 选择语法检查方式，这里我选择保存就检测
   
8. 之后选择配置文件放到In package.json里面
9. 是否记录一下以便下次继续使用这套配置

   Save this as a preset for future projects? (y/N)
   

10. 确认后等待下载依赖模块
11. 启动项目

项目目录

|-node_modules       -- 所有的项目依赖包都放在这个目录下
|-public             -- 公共文件夹
---|favicon.ico      -- 网站的显示图标
---|index.html       -- 入口的html文件
|-src                -- 源文件目录，编写的代码基本都在这个目录下
---|assets           -- 放置静态文件的目录，比如logo.pn就放在这里
---|components       -- Vue的组件文件，自定义的组件都会放到这
---|App.vue          -- 根组件，这个在Vue2中也有
---|main.ts          -- 入口文件，因为采用了TypeScript所以是ts结尾
---|shims-vue.d.ts   -- 类文件(也叫定义文件)，因为.vue结尾的文件在ts中不认可，所以要有定义文件
|-.gitignore         -- 用来配置那些文件不归git管理
|-package.json       -- 命令配置和包管理文件
|-README.md          -- 项目的说明文件，使用markdown语法进行编写
|-tsconfig.json      -- 关于TypoScript的配置文件
|-yarn.lock          -- 使用yarn后自动生成的文件，由Yarn管理，安装yarn包时的重要信息存储到yarn.lock文件中

package.json中三条命令

{"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"	// 检查代码中的编写规范},
}

main.ts 入口文件

import { createApp } from "vue"; // 引入vue文件，并导出`createApp`
import App from "./App.vue"; 	// 引入自定义组件，你在页面上看的东西基本都在这个组件里createApp(App).mount("#app"); 	// 把App挂载到#app节点上，在public目录下的index.html找节点

App.vue

defineComponent重要的是：在TypeScript下，给予了组件 正确的参数类型推断。
<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';export default defineComponent({name: 'App',components: {HelloWorld}
});
</script>

组合API

setup()是vue3中使用的所有组合api的入口函数 他执行在生命周期beforeCreate之前 所以他的内部不能使用this.

响应API

reactive：返回对象的响应式副本(定义对象)

• reactive是Vue3中提供实现响应式数据的方法.
• 在Vue2中响应式数据是通过defineProperty来实现的.
• 而在Vue3响应式数据是通过ES6的Proxy来实现的，递归给每一个reactive声明的对象数据添加setter/getter方法，从而实现数据的响应式。
• 更推荐去定义复杂的数据类型

<script lang="ts">import { defineComponent, reactive } from 'vue'export default defineComponent({name:'App',setup(){// 本质是转成proxy对象let state = reactive({age:1})return {state}}	})
</script>
// 使用：
{{state.age}}

ref（定义数组或基本数据类型）

• ref和reactive一样,也是用来实现响应式数据的方法
• 由于reactive必须传递一个对象,所以在实际开发中如果只是想让某个变量实现响应式的时候回非常麻烦
• 所以Vue3提供了ref方法实现简单值得监听
• ref底层其实还是reactive,所以当运行时系统会自动根据传入的ref转换成reactive
• 推荐定义基本数据类型或数组
• ref声明的数据是一个对象，值是value,取值时不用写value,赋值时需要写value

<script lang="ts">import { ref,defineComponent } from 'vue'export default defineComponent({name:'App',setup(){const state = ref(1)return {state}}})
</script>
// 使用：
{{state.age}}

toRefs可以解构reactive对象的属性，将属性取出转换成一个ref对象

toRefs 将响应式对象转换成普通对象，其中结果对象的每个属性都是指向原始对象相应属性，当从组合式函数返回响应式对象时，toRefs非常有用，可以分解对象的单个属性 并保留属性的响应式。

<script lang="ts">import { toRefs,defineComponent } from 'vue'export default defineComponent ({name:'App',setup(){let state = reactive({bargin: {},news: [],recs: []})......return {...toRefs(state)}}})
</script>
# 使用
<span v-for="(item,i) in recs" :key="item.id"></span>

生命周期

setup中没有this ，使用生命周期时需要导入。

<script lang="ts">import { defineComponent,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,nextTick }from 'vue'export default defineComponent({name:'App',setup() {// 当dom更新或者打补丁完成后立即执行的一个函数nextTick(()=>{// 可以获取到dom节点})onBeforeMount(()=>{})onMounted(()=>{})}})</script>

vue2.x和vue3.x生命周期区别

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

除了这些钩子函数外，Vue3.x还增加了onRenderTracked和onRenderTriggered函数

这两个钩子函数是Vue3.x版本新加的两个钩子函数，官方说是用来调试使用的，但是目前还没有给出具体的调试案例。

onRenderTracked

onRenderTracked,它会跟踪页面上所有响应式变量和方法的状态，也就是我们用return返回去的值，他都会跟踪。
import { .... ,onRenderTracked,} from "vue";
onRenderTracked((event) => {console.log("状态跟踪组件----------->");console.log(event);
});

onRenderTriggered

onRenderTriggered,它不会跟踪每一个值，而是给你变化值的信息，并且新值和旧值都会给你明确的展示出来。
import { .... ,onRenderTriggered,} from "vue";
onRenderTriggered((event) => {console.log("状态触发组件--------------->");console.log(event);
});

event对象属性：

- key 那边变量发生了变化
- newValue 更新后变量的值
- oldValue 更新前变量的值
- target 目前页面中的响应变量和函数

更新中。。。