vue学习笔记——简单入门总结(四)

1.Vue3的特性和变化

1.1.创建vue3项目

1.这里我们使用脚手架进行创建

当然同样可以不使用webpack而使用vite进行构建你的vue项目

2.启动vue项目

vue3项目和vue2项目的基本操作方式并无不同

1.2.分析main.js变化：

vue2

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

vue3

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

vue2和vue创建app和vm方式十分类似，vue采用new创建实例，而vue3采用工厂函数进行创建

就两者结果而言，vue2的vm更重，有相当多的属性和api，而vue2的app则做了针对的响应的精简，这也促成了vue3运行效率的提升

下图（第一个是vm，第二个是vue3的app）

1.3.setup–组合式api的开端

setup在beforeCreate之前执行

setup钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：

1.需要在非单文件组件中使用组合式 API 时。

2.需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。

  setup() {
    const count = ref(0)
    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  }

说人话就是这里划一块区域，叫大乱炖，啥属性，方法啥的，都可以往这里塞。

1.4.ref函数和reactive函数：

既然setup配置项里塞了那么多东西，稍微动一下就响应?

那肯定不行。

所以我们在setup中需要手动告诉vue那些数据需要动态响应

1.ref函数

  setup() {
    const count = ref(0)

    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  },

2.reactive函数

  setup() {
    const person = reactive({
     name : '张三',
     age : 21})

    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      person
    }
  },

reactive函数和以往任何函数都不同，它通过数据代理和反射对对象进行操作，无论对象增添还是删除属性，vue都能进行检测，弥补了vue2的缺点

1.5.watch监视属性

在vue3中，监视变更为函数式，因此可以写多个监视函数。

在监视使用reactive函数的对象时，oldValue会获取不到。

watch对reactive整体监视，深度监视配置无效，监视单一属性有效

监视对象其中属性，

watch(()=>person.age, (newValue,oldValue)=>{
      console.log('新的值',newValue);
      console.log('旧的值',oldValue);
    })

可用数组监视多个属性

1.5.watchEffect函数

与watch用法基本一致，不过只需要指定回调即可

watchEffect(()=>{
      const x = person.age
      console.log('修改了age',x)
    })

1.6.vue3生命周期：

vue3相对vue2于主要有以下变化：

1：在初始化生命周期前就判断有否有要挂载的el

2：把beforeDestroy和destroyed变更为beforeUnmount和unmounted