VUE3.0语法--1

一、Vue3对象新方法

createApp

应用实例化，该方法返回应用实例。可通过该实例进行一些操作，如全局挂载，插件集成等等。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
 
const app = createApp(App)
app.use(router) // 安装路由模块
app.mount('#app')//挂载
app.config.globalProperties.systemName = '猎码士' // 全局挂载

reactive

作用：创建响应式对象，非包装对象，类似于在2.0的data中声明变量。

<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup(){
    const title = reactive({
      name:'欢迎学习Vue3.0'
    })
    return { title }
  }
}
</script>

Ref

作用：创建一个包装式对象，含有一个响应式属性value

它和reactive的差别，就是前者没有包装属性value

<script>
import { reactive,ref } from 'vue'
export default {
  name: 'App',
  setup(){
    const user = ref('河畔一角');
    //如果需要修改值，可通过value
    user.value = '河畔老师'
    return {user }
  }
}
</script>

toRef、toRefs

应用场景:
如果想让响应式数据和以前的数据关联起来, 并且更新响应式数据之后还不想更新UI, 那么就可以使用toRef

<script>
  /*
  1.toRef
  创建一个ref类型数据, 并和以前的数据关联
  2.toRefs
  批量创建ref类型数据, 并和以前数据关联
  3.toRef和ref区别
  ref-创建出来的数据和以前无关(复制)
  toRef-创建出来的数据和以前的有关(引用)
  ref-数据变化会自动更新界面
  toRef-数据变化不会自动更新界面
  * */
  import {ref, toRef, toRefs} from 'vue';
export default {
  name: 'App',
  setup() {
      let obj = {name:'lnj', age:18};
      // let name = toRef(obj, 'name');
      // let age = toRef(obj, 'age');
      let state = toRefs(obj);

      function myFn() {
         <script>
  /*
  1.toRef
  创建一个ref类型数据, 并和以前的数据关联
  2.toRefs
  批量创建ref类型数据, 并和以前数据关联
  3.toRef和ref区别
  ref-创建出来的数据和以前无关(复制)
  toRef-创建出来的数据和以前的有关(引用)
  ref-数据变化会自动更新界面
  toRef-数据变化不会自动更新界面
  * */
  import {ref, toRef, toRefs} from 'vue';
export default {
  name: 'App',
  setup() {
      let obj = {name:'lnj', age:18};
      // let name = toRef(obj, 'name');
      // let age = toRef(obj, 'age');
      let state = toRefs(obj);

      function myFn() {
          // name.value = 'zs';
          // age.value = 666;
          state.name.value = 'zs';
          state.age.value = 666;
          console.log(obj); //{name:'zs', age:666}
          console.log(state);  //{name:'zs', age:666}
          // console.log(name); 
          // console.log(age);
      }
    return {state, myFn}
  }
}
</script>
          state.name.value = 'zs';
          state.age.value = 666;
          console.log(obj); //{name:'zs', age:666}
          console.log(state);  //{name:'zs', age:666}
          // console.log(name); 
          // console.log(age);
      }
    return {state, myFn}
  }
}
</script>

watch

1、监听对象

import { reactive, watch } from 'vue'
const state = reactive({ count: 0 })
watch(() => state.count, (newValue, oldValue) => {
    // 因为watch被观察的对象只能是getter/effect函数、ref、热active对象或者这些类型是数组
    // 所以需要将state.count变成getter函数
})

2、监听响应式对象

import { ref, watch } from 'vue' 
const count = ref(0) 
watch(count, (newValue, oldValue) => {
})

3、监听多个响应式对线，任何一个响应式对象更新，就会执行回调函数

import { ref, watch } from 'vue' 
const count = ref(0) 
const count2 = ref(1) 
watch([count, count2], ([newCount, newCount2], [oldCount, oldCount2]) => { 
})
//还有第二种写法
watch([count, count2], (newValue, oldVlaue) => {
    console.log(newValue)//[newCount, newCount2]
    console.log(oldValue)//[oldCount, oldCount2]
})

onMounted/computed

作用：周期函数和计算函数

<template>
  <div id="app">
    <h1>{{title.name}}</h1>
    <div>{{user}}</div>
    <button @click="updateUser">修改名称</button>
    <div>当前count：{{computedCount}}</div>
    <button @click="increment">修改count</button>
  </div>
</template>
<script>
import { reactive,ref,onMounted,computed } from 'vue'
export default {
  name: 'App',
  setup(){
    const title = reactive({
      name:'欢迎学习Vue3.0'
    })
    const user = ref('河畔一角');
    //如果需要修改值，可通过value
    
    const updateUser = ()=>{
      user.value = '河畔老师'
    }
    
    //生命周期方法
    onMounted(()=>{
      console.log('init mounted...')
    })
    // 初始化count值
    const count = ref(0);
    const increment = ()=>{
      count.value++
    }
    // 调用计算属性函数Hook
    const computedCount=computed(()=>count.value*10)
    return { title , user, updateUser,count,increment,computedCount }
  }
}
</script>

effect

 是一个随着依赖变化而执行自定义函数的函数

const num = reactive({currentNum:0})
                 
let changeValue

const callBackFn = ()=>{ changeValue = num.currentNum }

console.log(changeValue) // 0;

effect(callBackFn)

num.currentNum = 1;

console.log(changeValue) // 1;

二、事件处理

取消掉了methods对象，在setup里面定义，然后return，在html部分用法与vue2一致

<template>
  <div id="app">
    <h1>{{title.name}}</h1>
    <div>{{user}}</div>
    <button @click="updateUser">修改名称</button>
  </div>
</template>
<script>
import { reactive,ref } from 'vue'
export default {
  name: 'App',
  setup(){
    const title = reactive({
      name:'欢迎学习Vue3.0'
    })
    const user = ref('河畔一角');
    const updateUser = ()=>{
      //如果需要修改值，可通过value
      user.value = '河畔老师'
    }
    return { title , user, updateUser }
  }
}
</script>

四、跨组件通信

provide、inject

provide可以向所有子孙组件提供数据以及提供修改数据的方法，子孙组件用inject使用数据。

似乎，组合式API的provide没有提供批量方法， 只能每个变量写一句。

顶级组件：

<template>
  <div>
    <son />
  </div>
</template>

<script setup>
import son from "./son.vue";
import { provide } from "vue";
provide("abc", "123");
</script>

子组件：

<template>
  <div>
    <grandson />
  </div>
</template>

<script setup>
import grandson from "./grandson.vue";
</script>

孙组件：

<template>
  <div>我是孙子</div>
</template>

<script setup>
import { inject } from "vue";
const abc = inject("abc");
console.log(abc);
</script>