创建vue3项目

vite

使用vite创建项目学习vue3语法,使用vue-cli创建项目正式开发

npm init vite hello-vue3 -- --template vue
选择vue3
cd hello-vue3
npm i
npm run dev

vue-cli

npm install -g @vue/cli # 或 yarn global add @vue/cli
vue create hello-vue3
# 选择 vue 3 preset
cd hello-vue3
npm i
npm run serve

在main.js中创建一个vue应用

// 主要职责,:创建一个vue应用
//1. 导入createApp函数从vue中
import { createApp } from 'vue'
//2.创建一个根组件App.vue 导入至main
import App from "./App.vue"
// 3. 使用createApp创建应用实例
const app = createApp(App)
//4. 应用实例挂载到#app 容器中
app.mount('#app')

组合式 API

`setup` 组件选项

//1. 组合api的起点,

//2. 在beforeCreate之前执行.不能用this

// 3. 模板中需要使用的数据和函数,需要在setup中返回

生命周期

setup

onBeforeMount

onMounted

onBeforeUpdate

onUpdated

onBeforeUnmount

onUnmounted

reactive函数

定义复杂数据类型,成为响应式数据

toRef

转换响应式对象中某个属性为单独响应式数据,并且值是关联的

toRefs

转换响应式对象中所有属性为单独响应式数据,对象成为普通对象

ref函数

常用于定义简单数据类型,成为响应式数据

其实也可以定义复杂数据类型的响应式数据

在修改值,获取值的时候,需要.value

在模板中使用ref声明的响应式数据,可以省略.value

在模板中修改ref声明的响应式数据,不可以省略.value

注意:当你明确知道需要的是一个响应式数据对象,就使用reactive

其他情况使用ref

计算属性

依赖现有的响应式数据,根据一定逻辑得到一个新数据

给computed传入函数,返回值就是计算属性的值

给computed传入对象,get获取计算属性的值,set监听计算属性改变

  //初级用法
  const newAge=computed(()=>{
    return age.value+2
     })
  //高级用法
  //目的是让计算属性支持双向数据绑定
    const newAge = computed({
    get() {
    return age.value + 2;
    },
    set(value) {
      age.value = value-2;

    }
  });

watch函数

当你需要监听数据的变化就可以使用watch

1.监听一个ref数据

1.1第一个参数需要监听的目标

1.2第二个参数改变后触发的函数

  //初级用法
  //1.基础数据
  watch(count,(newVal,oldVal) =>{
    console.log(newVal,oldVal);
  })
  //2.复杂数据
    watch(obj,() =>{
    console.log('obj下的数据改变了');
  })
  //3.监听多个数据
   watch([obj,count],() =>{
    console.log('obj,count下的数据改变了');
  })
  //4.监听深层次数据
   watch(()=>obj.name,() =>{
    console.log('obj.name的值改变了');
  })
  //高级用法
   watch(()=>obj.brand,() =>{
    console.log('brand下的属性的值改变了');
  },{
    deep:true,
    imediate:true
  })

ref属性

单个元素:先声明ref响应式数据,返回给模板使用,通过ref绑定数据

遍历的元素:先定义一个空数组,定一个函数获取元素,返回给模板使用,通过ref绑定这个函数

边界问题:组件更新的时候会重复的设置dom元素给数组 onBeforeUpdate(()=>{ list=[] })

父传子

子组件接收父组件数据使用props即可获取父组件数据

    setup(props){
    console.log(props.money)
    }

子传父

使用setup的第二个参数context里面的emit

     setup(props,{emit}){
    console.log(props.money)
    emit('自定义事件名',传值)
    }

父子通讯 v-model新用法

vue2的时候,用.sync实现数据双向绑定

<Father :money='money' @update:money='fn' />

 //子组件:
 this.$emit("update:money", 50);

简写

 <Father :money.sync='money'>

在vue3.0的时候,使用v-model:money实现数据双向绑定

 <Father :money='money' @update:money='fn' />
 
  //子组件:
 emit("update:money", 50);

简写

  <Father v-model:money='money'>

依赖注入

完成后代组件,共享父组件数据

父组件 provide:提供数据和函数供后代组件使用

子组件 inject函数给当前组件注入provide提供的数据和函数

v-model语法糖

补充:$event的用法

1.获取原生事件对象:

绑定是函数,fn(e) {//e就是事件对象}

绑定的是js表达式,此时提供一个默认的变量 $event

<h1 @click="$event.target.style.color='red'">父组件</h1>

2. 获取自定义事件

绑定的是函数, fn(data){// data触发自定义事件的传参}

绑定的是js表达式,此时$event代表触发自定义事件的传参

vue2的时候,用v-model实现数据双向绑定

<Father :value='msg' @input='msg='$event' />

   //子组件:
 this.$emit("input", 50);

简写

 <Father  v-model='msg'>

在vue3.0的时候,使用v-model实现数据双向绑定

 <Father  :modelValue='msg' @update:modelValue='msg=$event' />
 
 //子组件:
 emit("update:modelValue", 50);

简写

  <Father  v-model='msg'>

mixins语法

全局混入:

在main.js中

  //this.$el是组件的根元素
    app.mixin({
      mounted() {
      console.log(this.$el,'dom准备好了');
     }
   })

局部混入:

mixins:[indexMixins]

vue2 可复用逻辑可用mixins来封装,但需要考虑逻辑代码冲突问题

vue3 组合API很好的解决了这个问题,不推荐使用mixins.

调试vue必备

谷歌扩展 vue-devtools 5.3.4 支持vue2

        vue-devtools 6.0.0 支持vue3

Vue3的基础使用