这是我参与「第五届青训营 」伴学笔记创作活动的第 4天
今天自学了Vue3以及TS的一些基础知识
1.搭建项目vue3
//全局安装脚手架
npm i -g @vue/cli
//创建一个名为project-name的vue3项目
vue create project-name
项目特性（代码规范、测试等等）预设
通过空格进行选中
2.代码格式化工具prettier
安装插件
新建配置文件
修改vs设置
设定编辑器默认代码格式化（美化）的插件为Prettier，同理在搜索设置框贴入editor.defaultFormatter，将配置项选择为Prettier。
3.组件定义Component
使用defineComponent()函数
一个简单的组件定义
tips:如何提取props定义 as const*告诉TS这是一个ReaderOnly的对象
4.复现Vue3的组件生成过程
//main.ts
//createApp创建App、defineComponent构建组件、h生成元素
import { createApp, defineComponent, h } from 'vue'
//引入HelloWorld组件
import HelloWorld from './components/HelloWorld.vue'
//eslint格式下导入图片地址
const img = require('./assets/logo.png') //eslint-disable-line
//创建App的组件
const App = defineComponent({
render() {
return h('div', { id: 'app' }, [
h('img', {
alt: 'VueLogo',
src: img,
}),
h(HelloWorld, {
msg: 'Welcome to Your Vue.js + TypeScript App',
age: 18,
}),
])
},
})
//挂载到id为app的元素上，作用到App.vue上
createApp(App).mount('#app')
//HelloWorld.vue
<template>
<div class="hello">
{{ age }}
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
//接收参数
const PropsType = {
msg: String,
age: {
type: Number,
required: true,
},
}
export default defineComponent({
name: 'HelloWorld',
props: PropsType,
})
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}*/
</style>
//App.vue
<template>
//此时由main.ts中的组件生效，看下图数字就知道（18是main.ts中定义的）
<!--<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" v-bind:age="13" />-->
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
export default defineComponent({
name: 'App',
components: {
HelloWorld,
},
})
</script>
<style>
/*create(App).mount(#app)被作用的位置，也可以在html中创建一个元素进行挂载*/
#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>
5.createVNode
//main.ts
//createApp创建App、defineComponent构建组件、h生成元素
import { createApp, defineComponent, createVNode } from 'vue'
//引入HelloWorld组件
import HelloWorld from './components/HelloWorld.vue'
//eslint格式下导入图片地址
const img = require('./assets/logo.png') //eslint-disable-line
//创建App的组件
const App = defineComponent({
render() {
return createVNode('div', { id: 'app' }, [
createVNode('img', {
alt: 'VueLogo',
src: img,
}),
createVNode(HelloWorld, {
msg: 'Welcome to Your Vue.js + TypeScript App',
age: 18,
}),
])
},
})
//挂载到id为app的元素上，作用到App.vue上
createApp(App).mount('#app')
将h函数换成createVNode一样有效，h函数是对createVNode的判断封装
6.watchEffect
//值变化后watchEffect调用的函数都会重新执行
watchEffect(() => {
console.log(nameRef.value)
})
7.在TS中使用setup()
通过闭包的特性：子级作用域可以调用父级作用域的所有变量
注意：可重复执行变量要定义在return() =>{里面} 这样才能重新渲染DOM树，因为setup()函数只会在初始化时执行一次
总结setup() :return的变量在写模板时可以直接使用，setup只有初始化会执行，return()/watchEffect()会在变量发生变化时执行值变化后重新执行
