初识vue3

Vue3

vue3 安装

vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create myv3
## 启动
cd myv3
npm run serve

vue3特点

1. 新增组合式api
2. 更加接近原生js
3. 按需加载

vscode插件推荐

vetur

Vue Volar extension Pack

便于vue项目开发

vue3与vue2基本相同

不同点

启动方式

v3
import {createApp} from 'vue'
createApp(App).use(router).use(store).mount("#app")

v2
import Vue from 'vue'
new Vue({
   store,
   router,
  render:h=>h(App)
}).$mount("#app")

全局方法挂载

v3
app.config.globalProperties.$say = function(msg){alert(msg)}
a

v2
Vue.prototype.$say = function(msg){alert(msg)}

根节点

v3 可以有多个根节点

v2 只能有一个根节点

生命周期，卸载

v3

beforeUnmount()
组件将要卸载

unmounted
组件已经卸载

生命周期函数 vue3 中的生命周期函数, 需要在 setup 中调用

const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  }
}

v2

beforeDestroy()
destroyed()

setup api

ref

创建值类型响应式数据方法

在seup内部需要.value来访问设置值

reactive

创建引用类型响应式数据方法

defineProps

定义 组传的传参props

defineEmits

定义组件发送的事件

watch

监听一个数据的变化

watchEffect

监听多个数据

生命周期

setup中的生命周期，没有beforeCreate与created

setup的生命周期需要加on前缀

ref 函数

作用: 定义一个响应式的数据（主要针对基础类型数据） 方法：引入 ref 函数，const xxx = ref(initValue) 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>

reactive函数

作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的- - 实例对象，简称proxy对象reactive定义的响应式数据是“深层次的”。
reactive定义的数据：操作数据与读取数据：均不需要.value

​ 总结 ref 和 reactive

1. 从定义数据角度对比

2. ref 用来定义：基本类型数据。

3. reactive 用来定义：对象（或数组）类型数据。

4. 备注：ref 也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。

5. 从原理角度对比

6. ref 通过Object.defineProperty()的get与set来实现响应式（数据劫持）。

7. reactive 通过使用 Proxy 来实现响应式（数据劫持）, 并通过 Reflect 操作源对象内部的数据。