vue3.0第二个参数: callback 函数内部的响应对象改变就会触发响应,默认触发深层监控. provide()

vue3

如何升级

脚手架创建的vue2 需要在根目录npm安装vue3插件

 npm install --save @vue/composition-api //根目录执行
yarn add @vue/composition-api  //根目录执行
// main.ts
import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompositionApi)

comPosition(合成Api)

setup函数(取消created和before created用此函数代替,methods和data也在里面)

默认两个参数

props
1. props参数是作为组件接受的所有传过来props,但是还是需要写props字段接受
context上下文(root/emit/refs等)
1. 无this (上下文内容都放在了第二个参数里

reactive

将一个对象处理为可响应数据的对象,不执行

import { reactive } from "vue";
export default {
  setup() {
    const userInfo=reactive({userName:"虎克小哥哥"});
    return {
      userInfo
    };
  },
};

ref

根据将给定的值创建作为一个响应式的数据对象,

设置值必须是xx.value
取值必须放到return里!!

  setup(props, { attrs, emit, isServer, listeners, parent, refs, root, slots, ssrContext }) {
    const user = reactive({
      name: '罗罗'
    })
    const city = ref('我不是上海')
    const getUserCity=()=>{
      city.value="上海";
    }
    return {
        user, // 经过reactive处理过的响应式数据,(对象格式)
        city,
        getUserCity
    }

isRef( isProxy、isReactive、isReadonly)

isRef() 用来判断某个值是否为 ref() 创建出来的对象,isproxy等都是大同小异

toRefs

把reactive转换成对象的多层响应式对象转换为普通响应式数据

  setup(props, { attrs, emit, isServer, listeners, parent, refs, root, slots, ssrContext }) {
    const torefsTest = reactive({
        fix:2
    })
    return {

        ...toRefs(torefsTest), // 把reactive转换成对象的多层响应式对象转换为普通响应式数据
    }
  }

computed

传 computed() 计算属性传入一个 function 函数，可以得到一个只读的计算属性传入一个对象可以自定义get set函数返回一个响的应式ref对象


    let age = ref('111,我是只读属性')
    // 5. computed
    // 传入函数,返回一个只读的ref对象值 如果传入一个对象,就是一个get / set方法设置
  let userAge =   computed(function (){
        return '我的年龄是' + age.value
    })
    return {
      userAge
    }

watch

取值,设置值是用对象.xx 而不是对象.value 第一个参数: 数据源 ,例如监控age 第二个参数: callback 函数内部的响应对象改变就会触发响应,默认触发深层监控. 第三个参数: 函数触发的config 是可以修改是否深度监听

    let stop = watch(age,()=>{
        console.log('我的年龄是' + age.aa); // 此处bushi.value
        return  age.aa
    },{lazy:false})
    return {
      stop
    }

监听多个对象,是传入数组,但是多个文档不相同,所以没执行

provide&inject

provide & inject 共享普通数据,多级组件的数据传递（不限层级,可以说是优点也可以说是缺点,因为命名规则稍有不规范就会显得数据维护性降低bug满天飞,层级过深的时候也不是很直观） provide() 和 inject() 可以实现嵌套组件之间的数据传递。父级组件中使用 provide() 函数向下传递数据；子/孙级组件中使用 inject() 获取上层传递过来的数据

爷爷传递给孙子的属性,孙子里可以修改孙子组件

 <template>
  <section>
   <div>孙子组件</div>
   <img style="width:50px;height:50px" :src="pic"/>
  </section>
</template>

<script>
import { inject } from 'vue'
export default {
  setup() {
    //A组件获取父组件传递过来的帅气头像数据
    const pic = inject('pic')
    return {pic}
  },
};
</script>

子组件

<template>
<section>
 <div>子组件</div>
 <com-achild/>
</section>
</template>

<script>
import ComAchild from "./components/Achild.vue";
export default {
 components:{
  ComAchild,
},
};
</script>

爷爷组件

<template>
  <section>
   <com-a/>
  </section>
</template>

import ComA from "./components/A.vue";
import {provide,ref} from "vue";
const pic='https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1461286262,427682797&fm=26&gp=0.jpg'
export default {
   components:{
    ComA,
  },
  setup() {
    //父组件冒泡共享数据pic
    provide('pic',pic )
    //也支持传递响应式数据
    const pic = ref('pic');
    provide('pic',pic)
  },
};

ref

ref 组件实例获取,使用其内部函数和参数父级.html文件

    <Sunzi ref='comRef'></Sunzi>

父.js

import Sunzi from './sunzi.vue'
export default {
  components: {
    Sunzi
  },
  setup(props,context) {
    // ref组件实例,并取得函数使用
    const comRef = ref(null)
    onMounted(()=>{
      console.log(comRef.value.refComParams());
      console.log(comRef.value.yeye);
    })

    return {
      comRef
    }
  }
}

子.js 其实就是一个函数,在steup的函数return出去,在父级的子组件挂载完以后可以用里面的值(不用再子传父了)

    let refComParams = ()=>{
        // ref组件实例里的函数试验
        return '我是子组件里函数返回的值,给到父组件使用'
    }
    return {
      yeye,
      changeyeye,
      refComParams
    }

customRef

创建一个可以控制其get set触发更新的引用对象，返回一个响应式的ref对象 ,返回对象本身感觉就是一个object.definedProperty的使用方法改变

<input v-model="text" />

function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}

export default {
  setup() {
    return {
      text: useDebouncedRef('hello')
    }
  }
}

createComponent

创建组件,就是在写一个页面的时候,需要从comPostionApi导出方法

	import {
  createComponent,
  onMounted,
  onUnmounted,
  reactive
} from '@vue/composition-api'
export default createComponent({
  name:'helloWorld',
  
})