Vue3与TypeScript开发学习笔记

1、安装准备流程

名称	说明
npm install -g @vue/cli	安装vue-cli（4.0以上版本才可以支持vue3。）
vue --version	查看vue-cli版本
vue create 项目名称	安装vue3项目
1、Manually select features	选择此项进行带ts语法的安装。vue2和vue3自带模版选项无ts
2、 Choose Vue version，Babel，TypeScript，Linter / Formatter	选择示例基本四
3、3.x	选择3.x选项
4、Use class-style component syntax? (y/N) n	是否需要类类型的组件，选择n
5、Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? n	使用使用jsx，选择n
6、ESLint with error prevention only	选择默认的第一项
7、Lint on save	选择默认的第一项
8、In dedicated config files	选择默认的第一项
9、Save this as a preset for future projects? (y/N)	是否默认保存当前配置，建议选择n
10、在开发工具中安装eslin、vetur	用来辅助提高开发效率

2、内置属性或方法（import { } from ‘vue’;）

名称	说明
ref()	数据双向绑定函数，使用此函数在逻辑代码中应用.value取值
computed(()=>{return …})	计算属性，回调函数
reactive({})	数据双向绑定，响应式对象，与ref()类似，但不需要在逻辑代码中应用.value
toRefs()	将接收的数据参数变成ref类型的对象并返回。
onBeforeMount	挂载到dom前钩子函数
onMounted	挂载到dom后钩子函数
onBeforeUpdate	data被修改，重新渲染前执行钩子函数
onUpdated	data被修改，重新渲染后执行钩子函数
onBeforeUnmount	销毁组件前执行钩子函数
onUnmounted	销毁组件后执行钩子函数
onActivated()	包含在中的组件，激活时执行
onDeactivated()	包含在中的组件，组件间互相切换时，前一组件消失时执行
onErrorCaptured()	当捕获一个来自子孙组件的异常时激活钩子函数
onRenderTracked()	跟踪页面上所有响应式变量和方法的状态，只要页面有update的情况，就会生成一个event对象，通过event对象来查找程序的问题
onRenderTriggered()	状态触发,它不会跟踪每一个值，而是给你变化值的信息，并且新值和旧值都会明确的展示出来
watch([a,b],(c,d)=>{})	监听属性,第一项参数a,b可以是属性，也可以是数组，如果要监听多个属性，需要用数组形式。用来监听多项值。第二参数为方法函数，用于对监听的属性进行逻辑修改。第三参数是方法函数的二个参数c,d，为监听属性的新值与旧值
export default 函数名	复用函数导出方法

3、常用基本函数属性

名称	说明
setup()	准备函数，初始化函数
return{ …refData }	展开对象数据

4、Vue3的生命周期

名称	说明
new Vue()	新建vue实例

未完待续…