vue3.0

创建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 ')