初试vue3

1.在main.js 中

// 引入的不再是Vue构造函数，而是一个工厂函数
import { createApp } from 'vue'
import App from './App.vue'
// 创建应用实例对象，类似于vue2中的vm，但比它更轻，最后挂载到根元素
createApp(App).mount('#app')
// 可以打印createApp（App）

2.在App.vue中

<template>
  <!-- 根标签可以没有 -->
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

3.setup的使用，执行时机在beforeCreate()之前，且this指向undefined；

<template>
  <div>我是app组件</div>
  <p>{{name}}</p>
</template>

<script>
import {h} from 'vue'
export default {
  name: 'App',
  components: {},
  // setup是vue3中新增的配置项，是所有组合Api表演的舞台
  setup() {
    // 数据
    let name = '云云';
    let age = '18';
    // 方法
    function sayHi() {
      alert(`我叫${name}`);
    }
    // 返回一个对象，对象中的属性，方法，在模板中可使用，
    /* return {
      name,
      age,
      sayHi
    } */
    // 若返回一个渲染函数，则可以自定义渲染内容
    return () => h('h1','渲染函数')
  }

}
</script>

4.在vue2里能够读取vue3的属性和方法，在vue3的setup里面不能读取vue2的属性和方法，如果出现冲突，vue3 的属性优先，建议不要在vue3使用vue2的写法，不要混用。

5.ref实现数据响应式是通过vue2的方法

<script>
import{ref} from 'vue'
export default {
  name: 'App',
  components: {},
  setup() {
    // ref实现数据响应式
    // 如果是字符串或数字 用的是setter getter
    // 如果是对象 用的是proxy代理 求助reactive函数实现
    let name = ref('云云');
    let age = ref(16);
    let job = ref({
      type: '工程师',
      salary: '20k'
    })
    function change() {
      job.value.salary = '30k';
    }
    // 返回一个对象，对象中的属性，方法，在模板中可使用，
    return {
      name,
      age,
      job,
      change
    }
  }

}
</script>

6.reactive函数利用proxy代理实现响应式；适用于对象和数组

setup() {
    let name = ref('云云');
    let age = ref(16);
    // reactive不能处理基本数据类型 能处理对象类型数据
    let job = reactive({
      type: '工程师',
      salary: '20k'
    });
    // reactive能处理数组类型数据
    let hoobies = reactive(['reading', 'sport'])
    function change() {
      name.value = '花花';
      job.salary = '30k';
      hoobies[0] = 'sleep';
    }
    // 返回一个对象，对象中的属性，方法，在模板中可使用，
    return {
      name,
      age,
      job,
      hoobies,
      change
    }
  }

7.props 和 context的使用

<template>
  <div>朋友:{{friend}}</div>
  <button @click="say">打招呼</button>
</template>

<script>
import{ref, reactive} from 'vue'
export default {
  name: 'Demo',
  props: ['friend'],
  emits: ['sayHi'],
  // 接受两个参数props context
  setup(props, context) {
    // props值为对象，组件外部传递过来，组件内部声明的属性
    console.log(props);
    // context：上下文对象 
    // context.attrs组件外部传进来的属性 相当于vue2中的this.$attrs
    // context.slots收到的插槽内容 相当于vue2中的this.$slots
    console.log(context);
    // context.emit分发自定义的函数 相当于vue2中的this.$emit
    function say() {
      context.emit('sayHi')
    }
    return {
      say
    }
  }
}
</script>

8.computed计算属性

<template>
  姓：<input v-model="person.firstName">
  名：<input v-model="person.lastName">
  全名：{{fullName}}
  名字： <input v-model="name">
</template>

<script>
import{ref, reactive, computed} from 'vue'
export default {
  name: 'App',
  components: {Demo},
  setup() {
    let person = reactive({
      firstName: '王',
      lastName: '轩'
    });
    // 计算属性-简写 不能去去修改fullName
    let fullName = computed(()=>{
      return person.firstName + person.lastName;
    })
    // 计算属性 完整写法 可以读和写
    let name = computed({
      get() {
        return person.firstName + '-' + person.lastName
      },
      set(value) {
        person.firstName = value.split('-')[0];
        person.lastName = value.split('-')[1];
      }
    })
    return {
      name,
      person,
      fullName,
    }
  }
}
</script>

9.watch 的使用

let person = reactive({
      firstName: '王',
      lastName: '轩',
      assets: {
        car: 'crv',
        house: 'villa'
      }
    });
    // 侦听器 参数：属性 回调方法 配置 
    let sum = ref(0);
    watch(sum, (newval, oldval)=>{
      console.log('sum变了', newval, oldval);
    }, {immediate: true})
    // 侦听多个ref 需要传递一个数组
    watch([sum, name], (newval, oldval)=>{
      console.log('变了', newval, oldval);
    })
    // 侦听reactive定义的对象 无法正确获取oldval
    // 侦听reactive定义的对象 默认开启深度监视deep: true
    watch(person, (newval, oldval)=>{
      console.log('person变了', newval, oldval);
    })
    // 侦听reactive定义的对象某个属性
    watch(()=>person.firstName, (newval, oldval)=>{
      console.log('person.firstName变了', newval, oldval);
    })
    // 侦听reactive定义的对象某些属性
    watch([()=>person.firstName, ()=>person.lastName], (newval, oldval)=>{
      console.log('firstName,lastName变了', newval, oldval);
    })
    // 侦听reactive定义的对象的对象 必须加上deep：true
    watch(()=>person.assets, (newval, oldval)=>{
      console.log('firstName,lastName变了', newval, oldval);
    }, {deep: true})

10.watchEffect

// watchEffect 回调函数里用到了谁 就监视谁 类似计算属性
    watchEffect(()=>{
      const val1 = age.value;
      const val2 =  person.firstName;
      console.log('watchEffect变了');
    })

11.生命周期

// 生命周期钩子函数 组合api的优先级高于配置项
// 执行顺序 setup>beforeCreate>created>onBeforeMount>beforeMount
    console.log('setup');
    onBeforeMount(()=>{
      console.log('onBeforeMount');
    })
    onMounted(()=>{
      console.log('onMounted');
    })
    onBeforeUpdate(()=>{
      console.log('onBeforeUpdate');
    })
    onUpdated(()=>{
      console.log('onUpdated');
    })
    onBeforeUnMount(()=>{
      console.log('onBeforeUnMount');
    })
    onUnMounted(()=>{
      console.log('onUnMounted');
    })