创建vue3.0
安装---npm i -g @vue/cli 默认更新到最新版本
npm -v 保证vue-cli在4.5版本以上
vue create 项目名
cd 项目名
npm run serve
eslintrc.js--->eslint的配置文件，修改后要重启服务
babel.config.js--->对插件进行配置
tsconfig.js--->对ts项目进行配置
main.ts
createApp:根据传入的组件生成一个对应的实例对象
APP:所有组件的父级组件
createApp(App).mount('#app') :将实例对象挂载到指定标签下
App.vue
1.<script lang="ts"></scrpit>
里面可以写ts代码
defineComponent:根据传入的配置对象，生成对应的组件
---区别一：vue2组件html模板中必须有一个根标签，vue3中可以没有
vscode自动生成代码块
ts回车--->自动生成代码块 （快捷键）
vscode--设置---用户代码片段--代码块在.vue文件中使用，选择vue.json中定义代码块
"Print to console": {
"prefix": "ts",
"body": [
"<template>;",
"<div>;",
"</div>;",
"</template>;",
"<script lang='ts'>",
"import {defineComponent} from vue",
"export default defineComponent({})",
"</script>",
"<style scoped>",
"</style>",
],
"description": "Log output to console"
}
vue3.0---setup
在创建组件之前执行，如果setup返回值是一个对象，对象的属性或者方法可以直接在模板中使用
vue3.0---ref
将一个普通数据变成一个响应式数据
import {ref}from "vue"
export default defineComponent({
name:"ref",
setup(){
const msg=ref('xd') ---使msg成为响应式数据
function changeMsg(){
msg.value+='...' ----ref对象取值时为msg.value
}
}
})
vue3.0---reactive
定义多个数据的响应式
import {reactive}from "vue"
export default defineComponent({
setup(){
const obj=reactive({
name:"张三"，
age:90
}) ---使obj成为响应式数据
}
})
vue3.0---setup细节
setup执行时机---在beforeCreate之前执行(执行一次)，此时组件对象还没有创建
this是undefined，data/computed/methods/props:都是不能使用的
可以用getCurrentInstance,就可以替代this存在。
setup返回值---返回一个对象，可以在模板中直接使用
返回的对象中的属性会与data函数返回对象的属性合并为组件对象的属性 mounted中打印this
返回的对象中的方法会与methods的方法合并为组件对象的方法 mounted中打印this可验证
import {getCurrentInstance}from "vue"
export default defineComponent({
setup(){
console.log("setup执行了")
const {proxy}:any=getCurrentInstance();
console.log('2')
}
beforeCreate(){
console.log('3')
}
})
vue3.0---setup的参数
props:一个对象，里面有父级向子级组件传递的数据，并且在子组件中使用props接收到的所有属性，并且获取到的数据保持响应性
context:一个对象，这个对象暴露了三个组件的属性，我们可以通过解构的方法分别获取这三个属性{attr ,slots,emit}
attr:绑定到组件上的非props数据，并且是非响应式的。
emit:vue2.0 this.$emit
slots:是组件的插槽，也不是响应式的
//props:["msg"], --->先接收数据，再使用
setup(props,context){
// console.log(props.msg)
console.log(context.attrs.msg)
//emit 子组件向父组件分发事件
}
props.msg和context.attrs.msg不能同时访问，只能有一个参数去访问msg
vue3.0---生命周期钩子函数
beforeCreate -> 请使用 setup()
created -> 请使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
执行顺序
beforeMount(){console.log(vue2+"1")}
Mount(){console.log(vue2+"2")}
setup(){
onBeforeMount(){console.log(vue3+"1")}
onMount(){console.log(vue3+"2")}
}
执行顺序：vue31--vue21--vue32--vue22
vue3.0--ref的新用法(自动获取焦点)
<input type="text" ref="demo">
setup(){
const demo=ref<HTMLElement|null>(null)
onMounted(()=>{
demo.value&&demo.value.focus
});
return{demo}
}
vue3.0中的computed(计算属性)
---返回一个不变的响应式ref对象
computed(()=>{count.value+1})
---还可以使用get，set函数的对象来创建可写的ref对象
computed({
get:()=>count.value+1;
set:val=>{
count.value = val - 1;
}
})
vue3.0中的watch(监视器)
watch的参数：监视源，回调函数，配置项
watch(obj,()=>{
console.log(obj的值发生变化了)
},{
immediate:true --->配置项
deep:true --->配置项
})
watch监听多个源
watch([obj1,obj2],()=>{})
vue3.0中新特性provide和inject
如何使用：
利用provide和inject实现跨层组件的信息通信 父级组件跨过子组件给孙子组件传值
父组件--->provide('color',color)
孙子组件--->const color=inject('color ')
