vue的vue2和vue3

选项API和组合API
#

什么是选项API写法：Options ApI

咱们在vue2.x项目中使用的就是 选项API 写法

1. 代码风格：data选项写数据，methods选项写函数...，一个功能逻辑的代码分散。
1. 优点：易于学习和使用，写代码的位置已经约定好
1. 缺点：代码组织性差，相似的逻辑（功能）代码不便于复用，逻辑复杂代码多了不好阅读。

什么是组合API：Composition API

以功能为单位组织代码结构，后续重用功能更加方便。

总结：组合API的最大好处就是以功能为单位组织代码结构，有利于代码的复用

vue2的选项类型 API
#

选项类型API（Options API）旧的选项型API在代码里分割了不同的属性（properties）：data，computed属性，

export default {
  props: {
    title: String
  },
  data () {
    return {
      username: '',
      password: ''
    }
  },
mounted () {
    console.log('组件已挂载')//生命周期
  },
 methods: {
    login () {
      // 登陆方法
    }
  }
}

why vue3
#

紧跟 react 的新特性，添加类似于 react 16.8 升级后的特性。吸收新的编程思想。

组合API
#

新的合成型API能让我们用方法（function）来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。

export default {
  props: {
    title: String
  },
  setup () {
    const state = reactive({
      username: '',
      password: ''
    })

    const login = () => {
      // 登陆方法
    }
 onMounted(() => {
      console.log('title: ' + props.title)
    })
    return { 
      login,
      state
    }
  }
}

Vue3现状：
#

vue-next 2020年09月18日，正式发布vue3.0版本。但由于刚发布周边生态不支持，大多数开发者处于观望。
现在主流组件库都已经发布了支持vue3.0的版本，其他生态也在不断地完善中，这是趋势。
1. element-plus 基于 Vue 3.0 的桌面端组件库
2. vant vant3.0版本，有赞前端团队开源移动端组件库
3. ant-design-vue Ant Design Vue 2.0版本，社区根据蚂蚁 ant design 开发

Vue3优点：
#

最火框架，它是国内最火的前端框架之一
性能提升，运行速度事vue2.x的1.5倍左右
体积更小，按需编译体积比vue2.x要更小
类型推断，更好的支持Ts（typescript）这个也是趋势（js的超集）
高级给予，暴露了更底层的API和提供更先进的内置组件
★选项API—–组合API (composition api) ，能够更好的组织逻辑，封装逻辑，复用逻辑

Vue3展望：
#

这是趋势，越来越多的企业将来肯定会升级到Vue3.0
大型项目，由于对Ts的友好越来越多大型项目可以用Vue3.0

1.vue3依赖的相关第三方包有针对性（包的名称发生变化）
2.vue3性格更好，编程体验更好
3.这是未来的趋势，未来已来。

vue3的使用
#

从0 到1 的不同点。

创建vue应用
#

基于Vue脚手架创建项目

# 1. 安装脚手架
npm i @vue/cli -g
# 2. 创建vue3项目（选项中选择v3版本，其他和之前一样）
vue create 项目名称
# 3、切换路径
cd 项目名称
# 4、运行项目
npm run serve

项目代码结构分析

入口文件main.js

// Api的按需导入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 入口文件的职能：把根组件渲染到单页面的div里面

// Vue2中代码风格
// const vm = new Vue({
//   router,
//   store,
//   render: h => h(App)
// }).$mount('#app')

// Vue3的代码风格
// createApp(App).use(store).use(router).mount('#app')

// createApp方法负责创建Vue实例对象
const vm = createApp(App)
// 把store和router插件配置到Vue实例中
vm.use(store).use(router).mount('#app')

根组件结构

<template>
  <!-- Vue2中组件的模板必须有唯一的根节点 -->
  <!-- Vue3中组件的模板可以没有根节点 -->
  <div id="nav">
    <router-link to="/">主页</router-link> |
    <router-link to="/about">关于</router-link>
  </div>
  <!-- 路由组件的填充位置 -->
  <router-view />
</template>

路由模块分析

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

// 路由映射
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

// Vue2创建路由实例对象
// const router = new VueRouter({
//   mode: 'hash/history',
//   routes: routes
// })

// Vue3创建路由实例对象
const router = createRouter({
  // 设置路由的模式：hash/history
  // history: createWebHistory(),
  history: createWebHashHistory(),
  routes
})

export default router

Vuex模块

import { createStore } from 'vuex'

// Vue2实例化
// new Vuex.Store({})

// Vue3实例化
export default createStore({
  // 状态
  state: {
  },
  // 修改状态
  mutations: {
  },
  // 异步操作
  actions: {
  },
  // 模块化拆分
  modules: {
  },
  // 类似于组件的计算属性
  getters: {
  }
})

注意：Vue3代码的整体风格：API的按需导入

组合API-setup函数
#

使用细节：

setup 是一个新的组件选项，作为组件中使用组合API的起点。
从组件生命周期来看，它的执行在组件实例创建之前vue2.x的beforeCreate执行。
这就意味着在setup函数中 this 还不是组件实例，this 此时是 undefined
在模版中需要使用的数据和函数，需要在 setup 返回。

演示代码：

<template>
  <div>
    <div>setup函数用法</div>
    <hr>
    <div>{{msg}}</div>
    <div>{{info}}</div>
    <div>
      <button @click='handleClick'>点击</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  // Vue3依然可以使用data中的数据，但是不建议使用（这是选项API）
  data () {
    return {
      info: 'nihao'
    }
  },
  setup () {
    // 触发时机在beforCreate/created生命周期之前
    // Vue3中beforCreate/created声明周期函数已经废弃了，其实已经被setup替代了

    // 此时无法访问this，因为组件实例此时尚未创建
    // console.log(this)

    // 定义事件函数
    const handleClick = () => {
      console.log('click')
    }

    // 这里返回的数据用于给模板使用：类似于之前data中提供的数据
    return {
      msg: 'hello',
      handleClick
    }
  }
}
</script>

<style lang="less">
</style>

组合API-生命周期
#

回顾vue2.x生命周期钩子函数：

beforeCreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载后
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后

认识vue3.0生命周期钩子函数

setup 创建实例前
onBeforeMount 挂载DOM前
onMounted 挂载DOM后
onBeforeUpdate 更新组件前
onUpdated 更新组件后
onBeforeUnmount 卸载销毁前
onUnmounted 卸载销毁后

演示代码：

<template>
  <div class="container">
    container
  </div>
</template>
<script>
import { onBeforeMount, onMounted } from 'vue'
export default {
  setup () {
    onBeforeMount(()=>{
      console.log('DOM渲染前',document.querySelector('.container'))
    })
    onMounted(()=>{
      console.log('DOM渲染后1',document.querySelector('.container'))
    })
    onMounted(()=>{
      console.log('DOM渲染后2',document.querySelector('.container'))
    })
  },
}
</script>

组合API-reactive函数
#

reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。

演示代码：

<template>
  <div>
    <div>数据的响应式</div>
    <hr>
    <div>{{obj.msg}}</div>
    <div>
      <button @click='handleClick'>点击</button>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  name: 'App',
  setup () {
    // 数据响应式：数据的变化导致视图自动变化
    // let msg = 'hello'
    // reactive方法包裹的对象中的数据都是响应式的
    const obj = reactive({
      msg: 'hello',
      info: 'hi'
    })
    const handleClick = () => {
      // msg = 'nihao'
      // console.log(msg)
      obj.msg = 'nihao'
    }
    return { obj, handleClick }
  }
}
</script>

<style lang="less">
</style>

组合API-toRef函数
#

定义响应式数据：

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

演示代码：

<template>
  <div>
    <div>数据的响应式</div>
    <hr>
    <!-- <div>{{obj.msg}}</div> -->
    <div>{{msg}}</div>
    <div>{{info}}</div>
    <div>
      <button @click='handleClick'>点击</button>
    </div>
  </div>
</template>

<script>
import { reactive, toRef } from 'vue'

export default {
  name: 'App',
  setup () {
    // 需求：模板中必须有添加对象obj前缀,而是直接获取属性
    // reactive方法包裹的对象中的数据都是响应式的
    const obj = reactive({
      msg: 'hello',
      info: 'hi'
    })
    // 把对象中的单个属性取出并且保证数据的响应式
    const msg = toRef(obj, 'msg')
    const info = toRef(obj, 'info')
    const handleClick = () => {
      obj.msg = 'nihao'
      obj.info = 'coniqiwa'
    }
    // reactive中的对象属性如果重新赋值会失去响应式能力
    return { msg, info, handleClick }
  }
}
</script>

<style lang="less">
</style>

组合API-toRefs函数
#

toRefs是函数，转换响应式对象中所有属性（可以是一部分）为单独响应式数据，对象成为普通对象，并且值是关联的

演示代码：

<template>
  <div>
    <div>数据的响应式</div>
    <hr>
    <!-- <div>{{obj.msg}}</div> -->
    <div>{{msg}}</div>
    <div>{{info}}</div>
    <div>
      <button @click='handleClick'>点击</button>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  name: 'App',
  setup () {
    // 需求：模板中必须有添加对象obj前缀,而是直接获取属性
    // reactive方法包裹的对象中的数据都是响应式的
    const obj = reactive({
      msg: 'hello',
      info: 'hi',
      abc: 'abc'
    })
    // 把对象中的单个属性取出并且保证数据的响应式
    // const msg = toRef(obj, 'msg')
    // const info = toRef(obj, 'info')

    // 把obj对象中的属性结构出来，保证响应式能力
    const { msg, info } = toRefs(obj)
    const handleClick = () => {
      obj.msg = 'nihao'
      obj.info = 'aligotogozayimasi'
    }
    // reactive中的对象属性如果重新赋值会失去响应式能力
    return { msg, info, handleClick }
  }
}
</script>

<style lang="less">
</style>

总结：toRefs方法可以批量转换对象中的属性为独立的响应式数据

组合API-ref函数
#

ref函数，常用于简单数据类型定义为响应式数据
- 在修改值和获取值的时候，需要.value
- 在模板中使用ref申明的响应式数据，可以省略.value

演示代码：

<template>
  <div>
    <div>数据的响应式</div>
    <hr>
    <div>{{count}}</div>
    <div>
      <button @click='handleClick'>点击</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'App',
  setup () {
    // ref主要（也可以是对象和数组）用于定义基本类型的数据并保证响应式能力
    const count = ref(0)
    const obj = ref({ msg: 'hello' })
    const handleClick = () => {
      // ref定义的数据，在js中操作时需要通过value属性进行
      // 但是模板中访问不需要value
      count.value += 1
      console.log(obj.value.msg)
    }
    return { count, handleClick }
  }
}
</script>

<style lang="less">
</style>

总结
如果是基本类型数据，可以使用ref进行定义
ref其实也可以定义对象，但是访问时需要value属性

数据响应式
1. setup中直接返回的普通数据不是响应式的
2. 通过reactive包裹对象可以成为响应式数据
3. 通过reactive包裹对象可以成为响应式数据
4. 为了简化对象的访问（去掉前缀），可以使用toRef进行优化
5. 为了获取对象中多个属性，可以使用toRefs进一步简化
6. 如果是简单数据类型，其实使用ref定义更加合适

组合API-computed函数
#

computed函数，是用来定义计算属性的，计算属性不能修改。

基本使用：只读

<template>
  <div>
    <div>计算属性</div>
    <hr>
    <button @click='age=25'>点击</button>
    <div>今年：{{age}}岁了</div>
    <div>明年：{{nextAge}}岁了</div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  name: 'App',
  setup () {
    // 计算属性：简化模板
    // 应用场景：基于已有的数据，计算一种数据
    const age = ref(18)

    // 计算属性基本使用
    const nextAge = computed(() => {
      // 回调函数必须return，结果就是计算的结果
      // 如果计算属性依赖的数据发生变化，那么会重新计算
      return age.value + 1
    })

    return { age, nextAge }
  }
}
</script>

<style lang="less">
</style>

Vue3中计算属性也是组合API风格

高级用法：可读可写

<template>
  <div>
    <div>计算属性</div>
    <hr>
    <button @click='age=25'>点击</button>
    <button @click='nextAge=28'>点击修改</button>
    <div>今年：{{age}}岁了</div>
    <div>明年：{{nextAge}}岁了</div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  name: 'App',
  setup () {
    // 计算属性：简化模板
    // 应用场景：基于已有的数据，计算一种数据
    const age = ref(18)

    // // 计算属性基本使用
    // const nextAge = computed(() => {
    //   // 回调函数必须return，结果就是计算的结果
    //   // 如果计算属性依赖的数据发生变化，那么会重新计算
    //   return age.value + 1
    // })

    // 修改计算属性的值
    const nextAge = computed({
      get () {
        // 如果读取计算属性的值，默认调用get方法
        return age.value + 1
      },
      set (v) {
        // 如果要想修改计算属性的值，默认调用set方法
        age.value = v - 1
      }
    })

    return { age, nextAge }
  }
}
</script>

<style lang="less">
</style>

总结：
计算属性可以直接读取或者修改
如果要实现计算属性的修改操作，那么computed的实参应该是对象
读取数据触发get方法
修改数据触发set方法，set函数的形参就是你赋给他的值

组合API-watch函数
#

watch函数，是用来定义侦听器的

监听ref定义的响应式数据

// 1、侦听器-基本类型
const count = ref(10)
// 侦听普通值基本使用
watch(count, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})

总结：侦听普通数据可以获取修改前后的值；被侦听的数据必须是响应式的。

监听reactive定义的响应式数据

const obj = reactive({
  msg: 'tom'
})

// 侦听对象
// watch(obj, (newValue, oldValue) => {
watch(obj, () => {
  // console.log(newValue === oldValue)
  console.log(obj.msg)
})

const handleClick = () => {
  obj.msg = 'jerry'
}

总结：如果侦听对象，那么侦听器的回调函数的两个参数是一样的结果，表示最新的对象数据，此时，也可以直接读取被侦听的对象，那么得到的值也是最新的。

监听多个响应式数据数据

// 3、侦听器-侦听多个数据
const n1 = ref(1)
const n2 = ref(2)

watch([n1, n2], (v1, v2) => {
  // v1和v2都是数组
  // v1表示被监听的所有值的最新值
  // v2表示被监听的所有值的原有值
  console.log(v1, v2)
})

总结：可以得到更新前后的值；侦听的结果也是数组，数据顺序一致

监听reactive定义的响应式数据的某一个属性

// 4、侦听对象中的某个属性
// 如果侦听对象中当个属性，需要使用函数方式
watch(() => obj.age, (v1, v2) => {
  console.log(v1, v2)
})

总结：如果侦听对象中单个属性，需要使用函数方式，侦听更少的数据有利于提高性能。

配置选项用法

// watch方法的配置选项
// immediate: true 表示，组件渲染后，立即触发一次
watch(() => stuInfo.friend, () => {
  console.log('sutInfo')
}, {
  immediate: true,
  // 被侦听的内容需要是函数的写法 () => stuInfo.friend
  deep: true
})

总结：
immediate: true,表示组件渲染时立即调用
deep:true，表示深度监听对象里面的子属性（被侦听的内容需要是函数的写法）

总结
#

Vue3介绍：第三方包需要专门针对vue3进行定制；性能更好；编程体验更好（组合API）；未来的趋势
创建Vue3项目：手动选择选项（选择v3）
代码的主体风格：按需导入（打包优化）
选项API和组合API的区别
setup方法基本用法：执行时机beforeCreate之前；无法访问this; 返回值给模板使用
组件的生命周期：setup替代了beforeCreate/created:生命周期函数名称发生了变化
数据响应式：普通数据没有响应式能力
- reactive
- toRef
- toRefs
- ref
综合案例：加强上述知识点的掌握；辅助理解组合API的开发模式
计算属性：获取；修改
侦听器
- 侦听基本类型数据
- 侦听引用类型数据
- 侦听多个数据
- 侦听对象的单个属性
- 侦听的配置选项：immediate；deep

组合API-ref属性
#

获取DOM或者组件实例可以使用ref属性，写法和vue2.0需要区分开

Vue2通过ref操作DOM或者组件：1.给标签添加ref属性并设置一个名字；2.通过this.$refs.起的名字

基于Vue2的方式操作ref—–数组场景

<ul>
  <li v-for="(item, index) in list" ref="fruits" :key="index">{{ item }}</li>
  <!-- <my-com :key='index' v-for='index in 8' ref='info'></my-com> -->
</ul>
<button @click="handleClick">点击</button>

methods: {
  handleClick () {
    const fruits = this.$refs.fruits
    console.log(fruits[1].innerHTML)
  }
}
// 批量绑定同名的ref （主要就是v-for场景中使用 ref）,此时通过[this.$refs.名称]访问的值应该是一个数组，数组中包含每一个DOM元素
// ref绑定组件的用法与之类似

总结：
Vue2中可以通过ref直接操作单个DOM和组件 this.$refs.info.innerHTML
Vue2中可以批量通过ref操作DOM和组件 this.$refs.fruits[0].innerHTML

ref操作单个DOM元素—-Vue3的规则

<template>
  <div>
    <div>ref操作DOM和组件</div>
    <hr>
    <!-- 3、模板中绑定上述返回的数据 -->
    <div ref='info'>hello</div>
    <!-- <my-com ref='info'>hello</my-com> -->
    <ul>
      <li ref='fruit' v-for='item in fruits' :key='item.id'>{{item.name}}</li>
    </ul>
    <button @click='handleClick'>点击</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'App',
  setup () {
    // this.$refs.info.innerHTML
    // this.$refs.fruit 的值应该是一个数组，数组中放的DOM元素
    // this.$refs.fruit[0].innerHTML ---> apple
    // -----------------------------------------
    // Vue3中通过ref操作DOM
    // 1、定义一个响应式变量
    const info = ref(null)

    const fruits = ref([{
      id: 1,
      name: 'apple'
    }, {
      id: 2,
      name: 'orange'
    }])

    const handleClick = () => {
      // 4、此时可以通过info变量操作DOM
      console.log(info.value.innerHTML)
    }

    // 2、把变量返回给模板使用
    return { fruits, info, handleClick }
  }
}
</script>

<style lang="less">
</style>

总结：操作单个DOM或者组件的流程
定义一个响应式变量
把变量返回给模板使用
模板中绑定上述返回的数据
可以通过info变量操作DOM或者组件实例

获取v-for遍历的DOM或者组件

<template>
  <div>
    <div>ref操作DOM和组件</div>
    <hr>
    <!-- 3、模板中绑定上述返回的数据 -->
    <div ref='info'>hello</div>
    <!-- <my-com ref='info'>hello</my-com> -->
    <ul>
      <li :ref='setFruits' v-for='item in fruits' :key='item.id'>{{item.name}}</li>
    </ul>
    <button @click='handleClick'>点击</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'App',
  setup () {
    // this.$refs.info.innerHTML
    // this.$refs.fruit 的值应该是一个数组，数组中放的DOM元素
    // this.$refs.fruit[0].innerHTML ---> apple
    // -----------------------------------------
    // Vue3中通过ref操作DOM
    // 1、定义一个响应式变量
    const info = ref(null)

    const fruits = ref([{
      id: 1,
      name: 'apple'
    }, {
      id: 2,
      name: 'orange'
    }, {
      id: 3,
      name: 'pineapple'
    }])

    // 定义操作DOM的函数
    const arr = []
    const setFruits = (el) => {
      // 参数el表示单个DOM元素
      arr.push(el)
    }

    const handleClick = () => {
      // 4、此时可以通过info变量操作DOM
      // console.log(info.value.innerHTML)
      console.log(arr)
    }

    // 2、把变量返回给模板使用
    return { fruits, info, handleClick, setFruits }
  }
}
</script>

<style lang="less">
</style>

总结：ref批量操作元素的流程
定义一个函数
把该函数绑定到ref上（必须动态绑定）
在函数中可以通过参数得到单个元素，这个元素一般可以放到数组中
通过上述数组即可操作批量的元素

防止重复添加DOM

<template>
  <div>
    <h2>组合API-ref操作DOM或组件{{info}}</h2>
    <hr>
    <!-- 2.绑定ref属性 -->
    <div ref='target'>你好</div>
    <ul>
      <li :ref='setDom' v-for='item in fruits' :key='item.id'>{{item.name}}</li>
    </ul>
    <button @click='handleClick'>点击</button>
  </div>
</template>
<script>
import { onBeforeUpdate, ref } from 'vue'

export default {
  name: 'App',
  setup () {
    const info = ref('hello')
    // 1. 定义一个变量
    const target = ref(null)
    const fruits = ref([{
      id: 1,
      name: 'apple'
    }, {
      id: 2,
      name: 'peach'
    }, {
      id: 3,
      name: 'orange'
    }])
    // 批量绑定DOM
    const list = ref([])
    const setDom = (ele) => {
      // 参数ele表示其中一个DOM元素
      if (ele) {
        list.value.push(ele)
      }
    }

    // 必须在任何数据变更之前重置数组，防止重复添加
    onBeforeUpdate(() => {
      list.value = []
    })

    const handleClick = () => {
      // 3.通过target操作DOM元素
      // console.log(target.value.innerHTML)
      // console.log(list.value[1].innerHTML)
      info.value = 'nihao'
      console.log(list.value.length)
    }
    return { target, handleClick, fruits, setDom, info }
  }
}
</script>

总结：每次变更数据，需要重置数组，防止重复添加

组合API-父子通讯
#

父组件向子组件传递数据：自定义属性 props
子组件向父组件传递数据 : 自定义事件 $emit()

父传子：

<template>
  <div>
    <div>父子组件的交互</div>
    <button @click='money=200'>修改</button>
    <hr>
    <Child :money='money' />
  </div>
</template>

<script>
import Child from './Child.vue'
import { ref } from 'vue'

export default {
  name: 'App',
  components: { Child },
  setup () {
    const money = ref(100)
    return { money }
  }
}
</script>

<template>
  <div>
    子组件 {{money}}
  </div>
  <button @click='getMoney'>点击</button>
</template>
<script>
export default {
  name: 'Child',
  props: {
    money: {
      type: Number,
      default: 0
    }
  },
  setup (props) {
    // Vue3中，使用形参props获取所有父组件传递的数据
    // props的数据是只读的，不可以在子组件直接修改
    const getMoney = () => {
      console.log(props.money)
    }
    return { getMoney }
  }
}
</script>

总结：
子组件模板中直接可以获取props中的属性值
vue代码中需要通过setup函数的第一个形参props获取属性值

子传父：

<template>
  <div>
    <div>父子组件的交互</div>
    <button @click='money=200'>修改</button>
    <hr>
+    <Child :money='money' @send-money='getMoney' />
  </div>
</template>

<script>
import Child from './Child.vue'
import { ref } from 'vue'

export default {
  name: 'App',
  components: { Child },
  setup () {
    const money = ref(100)
+    const getMoney = (value) => {
+      // value就是子组件传递回来的钱
+      money.value = money.value - value
+    }
+    return { money, getMoney }
  }
}
</script>

<template>
  <div>
    子组件 {{money}}
  </div>
  <button @click='getMoney'>点击</button>
</template>
<script>
export default {
  name: 'Child',
+  // 子组件触发的自定义事件需要在emits选项中进行声明（直观的看到本组件触发了那些自定义事件）
+  emits: ['send-money'],
  props: {
    money: {
      type: Number,
      default: 0
    }
  },
  setup (props, context) {
    // Vue3中，使用形参props获取所有父组件传递的数据
    // props的数据是只读的，不可以在子组件直接修改
    const getMoney = () => {
      console.log(props.money)
      // this.$emit('send-money', 50)
      // 向父组件传递数据50
+      context.emit('send-money', 50)
    }
    return { getMoney }
  }
}
</script>

总结：
通过setup函数的参数二context.emit方法触发自定义事件 context.emit('send-money', 50)
子组件触发的自定义事件需要在emits选项中进行声明（直观的看到本组件触发了那些自定义事件）

组合API-依赖注入
#

使用场景：有一个父组件，里头有子组件，有孙组件，有很多后代组件，共享父组件数据。

演示代码：

<template>
  <div>
    <div>父子组件的交互</div>
    <button @click='money=200'>修改</button>
    <hr>
    <Child :money='money' @send-money='getMoney' />
  </div>
</template>

<script>
import Child from './Child.vue'
+ import { ref, provide } from 'vue'

export default {
  name: 'App',
  components: { Child },
  setup () {
+    // 直接把数据传递出去
+    provide('moneyInfo', 1000)
    const money = ref(100)
    const getMoney = (value) => {
      // value就是子组件传递回来的钱
      money.value = money.value - value
    }
    return { money, getMoney }
  }
}
</script>

<template>
  <div>
+    孙子组件:{{moneyInfo}}
  </div>
</template>
<script>
+ import { inject } from 'vue'

export default {
  name: 'GrandSon',
  setup () {
+    const moneyInfo = inject('moneyInfo')
+    return { moneyInfo }
  }
}
</script>

<template>
  <div>
+    子组件 {{money}} --- {{moneyInfo}}
  </div>
  <button @click='getMoney'>点击</button>
  <GrandSon />
</template>
<script>
import GrandSon from '@/GrandSon'
import { inject } from 'vue'
export default {
  name: 'Child',
  components: { GrandSon },
  // 子组件触发的自定义事件需要在emits选项中进行声明（直观的看到本组件触发了那些自定义事件）
  emits: ['send-money'],
  props: {
    money: {
      type: Number,
      default: 0
    }
  },
  setup (props, context) {
+    const moneyInfo = inject('moneyInfo')
    // Vue3中，使用形参props获取所有父组件传递的数据
    // props的数据是只读的，不可以在子组件直接修改
    const getMoney = () => {
      console.log(props.money)
      // this.$emit('send-money', 50)
      // 向父组件传递数据50
      context.emit('send-money', 50)
    }
+    return { getMoney, moneyInfo }
  }
}
</script>

总结：
父传子孙数据：provide
子孙得到数据：inject

孙子把数据直接传递给爷爷

<template>
  <div>
    <div>父子组件的交互</div>
    <button @click='money=200'>修改</button>
    <hr>
    <Child :money='money' @send-money='getMoney' />
  </div>
</template>

<script>
import Child from './Child.vue'
import { ref, provide } from 'vue'

export default {
  name: 'App',
  components: { Child },
  setup () {
    // 直接把数据传递出去
    provide('moneyInfo', 1000)
    // 把一个函数传递给孙子
+    const handleMoney = (value) => {
+      console.log('孙子传递的数据：', value)
+    }
+    provide('handleMoney', handleMoney)
    const money = ref(100)
    const getMoney = (value) => {
      // value就是子组件传递回来的钱
      money.value = money.value - value
    }
    return { money, getMoney }
  }
}
</script>

<template>
  <div>
    孙子组件:{{moneyInfo}}
  </div>
+  <button @click='handleSend'>点击给爷爷数据</button>
</template>
<script>
import { inject } from 'vue'

export default {
  name: 'GrandSon',
  setup () {
    const moneyInfo = inject('moneyInfo')
+    const handleMoney = inject('handleMoney')
+    const handleSend = () => {
+      // 调用爷爷传递函数
+      handleMoney(200)
+    }
    return { moneyInfo, handleSend }
  }
}
</script>

总结：子组件传递数据给爷爷组件，需要通过provide一个函数的方式实现
爷爷组件传递一个函数，后续通过函数的形参获取数据
孙子组获取并调用该函数传递数据

v-model语法糖
#

Vue2中v-model的应用场景

<template>
  <div>
    <div>v-model指令用法</div>
    <hr>
    <div>{{uname}}</div>
    用户名：<input type="text" v-model='uname'>
    <!-- v-model的本质是属性绑定和事件绑定的结合 -->
    <input type="text" :value='uname' @input='uname=$event.target.value'>
    <!-- ---------------------------------------------------------------- -->
    <!-- v-model也可以使用到组件上 -->
    <my-com v-model='info'></my-com>
    <!-- 此时 $event表示子组件传递的具体数据 this.$emit('input', 100) -->
    <my-com :value='info' @input='info=$event'></my-com>
    <!-- Vue2中$event有两层含义 -->
    <!-- 1. 如果是原始DOM的事件，那么$event表示js的原生事件对象 -->
    <!-- 2、如果是组件的自定义事件，那么$event是$emit传递的数据 -->
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'App',
  setup () {
    const uname = ref('tom')
    return { uname }
  }
}
</script>

总结：Vue2中v-model的应用场景
用到表单元素上：$event表示事件对象
用到组件上：$event表示子组件传递的数据

Vue3中v-model新的特性

v-model的本质是 :modelValue 和 @update:modelValue 两者的绑定

<template>
  <div>
    <div>v-model指令用法-Vue3</div>
    <hr>
    <div>{{info}}</div>
+    <!-- <TestEvent v-model='info' /> -->
+    <TestEvent :modelValue='info' @update:modelValue='info=$event' />
  </div>
</template>

<script>
import TestEvent from './TextEvent.vue'
import { ref } from 'vue'

export default {
  name: 'App',
  components: { TestEvent },
  setup () {
    const info = ref('hello')
    return { info }
  }
}
</script>

<template>
  <div>
    子组件 {{modelValue}}
  </div>
  <button @click='handleEdit'>点击</button>
</template>
<script>
export default {
  name: 'TestEvent',
  props: {
+    // Vue3中，v-model默认绑定的属性名称是modelValue
+    modelValue: {
+      type: String,
+      default: ''
    }
  },
  setup (props, context) {
    const handleEdit = () => {
      // props.modelValue = 'nihao'
      // 通知父组件修改数据
      // .sync修饰符：update:绑定的属性名称
+      context.emit('update:modelValue', 'nihao')
    }
    return { handleEdit }
  }
}
</script>

v-model可以使用多次

<template>
  <div>
    <div>v-model指令用法-Vue3</div>
    <hr>
    <div>{{info}}</div>
    <div>{{msg}}</div>
    <!-- v-model提供了一种双向绑定机制（在组件上-父子之间的数据交互） -->
    <!-- .sync修饰符已经被废弃，替代方案是v-model -->
    <!-- <TestEvent v-model='info' :msg.sync='msg' /> -->
+    <TestEvent v-model:modelValue='info' v-model:msg='msg' />
+    <!-- <TestEvent :modelValue='info' @update:modelValue='info=$event' /> -->
  </div>
</template>

<script>
import TestEvent from './TextEvent.vue'
import { ref } from 'vue'

export default {
  name: 'App',
  components: { TestEvent },
  setup () {
    const info = ref('hello')
    const msg = ref('hi')

    return { info, msg }
  }
}
</script>

<template>
  <div>
    子组件 {{modelValue}}
  </div>
  <button @click='handleEdit'>点击</button>
</template>
<script>
export default {
  name: 'TestEvent',
  props: {
    // Vue3中，v-model默认绑定的属性名称是modelValue
    modelValue: {
      type: String,
      default: ''
    },
    msg: {
      type: String,
      default: ''
    }
  },
  setup (props, context) {
    const handleEdit = () => {
      // props.modelValue = 'nihao'
      // 通知父组件修改数据
      // .sync修饰符：update:绑定的属性名称
+      context.emit('update:modelValue', 'nihao')
+      context.emit('update:msg', 'coniqiwa')
    }
    return { handleEdit }
  }
}
</script>

总结：
v-model可以通过绑定多个属性的方式，向子组件传递多个值并且保证双向绑定
可以替代Vue2中sync修饰符（sync修饰符在Vue3中已经被废弃）

选项API和组合API#

vue2的选项类型 API#

why vue3#

组合API#

Vue3现状：#

Vue3优点：#

Vue3展望：#

vue3的使用#

创建vue应用#

组合API-setup函数#

组合API-生命周期#

组合API-reactive函数#

组合API-toRef函数#

组合API-toRefs函数#

组合API-ref函数#

组合API-computed函数#

组合API-watch函数#

总结#

组合API-ref属性#

组合API-父子通讯#

组合API-依赖注入#

v-model语法糖#

选项API和组合API
#

vue2的选项类型 API
#

why vue3
#

组合API
#

Vue3现状：
#

Vue3优点：
#

Vue3展望：
#

vue3的使用
#

创建vue应用
#

组合API-setup函数
#

组合API-生命周期
#

组合API-reactive函数
#

组合API-toRef函数
#

组合API-toRefs函数
#

组合API-ref函数
#

组合API-computed函数
#

组合API-watch函数
#

总结
#

组合API-ref属性
#

组合API-父子通讯
#

组合API-依赖注入
#

v-model语法糖
#