vue3 最新更新（组合api setup）

    ref 定义值类型响应式数据
    setup编写的代码更加直观，接近原生js
    setup 组合式api 按需加载
    reactive 定义引用类型的数据
    watch 监听数据
    watchEffect 只要回调引用的数据变化都会执行watchEffect回调函数
    computed计算，从现有数据计算出新的数据
    onMounted 挂载完毕
    getCurrentInstance 获取当前实例

1.组合api setup

组合api特点
更加直观接近原生js
按需加载
没有this降低了耦合性 提高复用率

setup() 相当于created生命周期z
            需要return 返回 在模块中使用
            ref 值类型 响应对象
            const count = ref(5)

在setup访问count值
            const.value来访问
            可以作为dom引用
            const int = ref(null)
            <input ref="inp">inp.value.innerText

2.reactive引用类型 响应式

const list = reactive(默认值)

        错误 ：   list = xxx  不能直接赋值 只能增删改查
        正确 ：   list.push(xxx)

 

3.watch监听

watch("count",(navl,oval)=>{
                // 执行回调函数
            })

 

 

4. watchEffect监听效果

只要引用的数据变化都会执行回调函数

采用的是watchEffect(()=>{
                localStorage.setltem("count",count.value)
            })
            stop用来停止监听
            stop()

 

 

5.computed 计算

computed(("count2")=>count.value*2)
            computed("age",{
                get(){return count.value},
                set(v){count.value = v}
            })

 6.生命周期

没有created 在原有生命周期添加on
            onBeforeMount挂载前
            onMounted挂载完毕
            onBeforeUpdate更新前
            onUpdated更新完毕
            onUnMount卸载前
            onUnMounted卸载完毕

 全局配置 app.config.globalProperities.xxx=yyy

getCurrentlnstance获取当前实例   //不推荐使用this

  const app = getCurrentlnstace().appContext
  const xxx = app.config.globalProperities.xxx

 7.获取到全局的方法

setup使用vuex import{useStore} from 'vuex'
			  const store = useStore()
			  store.commit("user/addScore",v)

8.setup使用路由

  import {useRouter,useRoute}from 'vue-router'
			  const router = useRouter();
			  const route = useRoute()
			  等同于this.$router 和this.$route

  setup(props,context)

  props传入参数 响应式
  context attrs属性
  emit 事件发送器
  slots 插槽同$slots
  expose暴露了数据和函数 跨层传参 参数