课件代码：vue3-001

1. vue2开发缺点和vue3开发优点
vue2代码冗余，杂乱
vue3则可以把相关的功能代码抽离分割在一起，方便开发者快速阅读

2. setup使用
setup函数是 Composition API（组合API）的入口
setup是启动页面后会自动执行的一个函数
项目中定义的所有变量，方法等都需要在setup中
在setup函数中定义的变量和方法最后都需要 return 出去， 否则无法在视图层中使用

setup(){
  console.log('自动执行')
  const name = '马云'
  const age = 54
  const company = '阿里巴巴'
 
  const btn = ()=>{
      const res = `我叫${name},今年${age}岁了,是${company}创始人`
      console.log(res)
  }

  // 计算属性
  // 侦听器
  return {name,btn}
}

课件代码：vue3-003

1. reactive介绍
reactive同样为我们的值创建了一个响应式引用
定义基本普通类型数据不能用reactive，用ref
reactive主要定义复杂数据类型，比如数组，对象
reactive可响应深层次的数据，比如多维数组
reactive返回一个响应式的proxy对象
使用需引入

import { reactive } from 'vue'
reactive({name:'马云'})

setup(){
    //  const name = reactive({name:'马云'})
    //  const age = reactive({age:52})
    //  const company = reactive({company:'阿里巴巴'})
    // //  深层次响应式
    //  const pro = reactive({
    //      a:'淘宝',
    //      b:'天猫',
    //      c:{
    //          d:'虾米',
    //          e:'支付宝'
    //      }
    //  })
    const btn = ()=>{
    //    name.name = '马化腾'
    //    age.age = 40
    //    pro.c.d = '虾米003'
          res.name = '马化腾'
    }
    // 共用一个reactive
    const name = '马云'
    const age = 52
    const company = '阿里巴巴'
    const res = reactive({name,age,company})


    return {res,btn}
}

课件代码：vue3-005

1. toRefs介绍
用于批量设置多个数据为响应式数据
toRefs与原始数据有交互，修改响应式数据会影响到原数据,但是不会更新视图层
toRefs还可以与其他响应式函数交互，更加方便处理视图层数据
使用需引入

import {toRefs} from 'vue'
toRefs(obj)

setup(){
    const obj = {name:'马云',age:40}
    const refs = reactive(obj)
    // const res = toRefs(refs)
    const btn = ()=>{
        //  res.name.value = '马化腾'
        //  console.log(res)
        console.log(refs)
        refs.name = '马化腾'
        console.log(refs)
        console.log(obj)
    }
    return {...toRefs(refs),btn}
}

课件代码：vue3-007

1. watch侦听器
与vue2一致，均是用来侦听数据变化的
使用需引入

import { watch } from 'vue'

setup() {
        const p1 = ref(0)
        const p2 = ref(1)
        const p3 = reactive({
            name:'马化腾',
            age:50,
            product:{
                wx:14
            }
        })
        // 一：侦听ref的基本数据
        // watch(p1,(newVal,oldVal)=>{
        //    console.log(newVal,oldVal)
        // },{immediate:true})//{immediate:true}立即侦听

        // 二：侦听多个ref响应数据
        // watch([p1,p2],(newVal,oldVal)=>{
        //    console.log(newVal,oldVal)
        // })

        // 三：侦听整个reactive定义的数据:只能监听到最新的结果，之前的结果监听不到
        // watch(p3,(newVal,oldVal)=>{
        //    console.log(newVal,oldVal)
        // })
       
        // 四：侦听reactive定义的数据中的某一个值:可以监听到,无论层级有多深
        watch(()=>p3.product.wx,(newVal,oldVal)=>{
            console.log(newVal,oldVal)
        })
        return {p1,p2,p3}
    },

课件代码：vue3-009

1. shallowRef和shallowReactive
shallowRef只处理基本类型数据
shallowReactive只处理第一层数据
使用需引入

import { shallowReactive,shallowRef } from 'vue'

setup() {
        //shallowReactive:只处理第一层的数据
        const p1 = shallowReactive({
            name:'马云',
            product:{
                taobao:5
            }
        })
        // shallowRef:只处理基本类型数据
        const p2 = shallowRef({
            val:1
        })
        console.log(p2)
        return{...toRefs(p1),p2}
    },

课件代码：vue3——011

1. vuex
同vue2一致
使用需要安装，引入

//安装
npm install vuex@next --save
//引入
import {useStore} from 'vuex'