深入vue3学习(2)

最新推荐文章于 2023-09-13 16:39:47 发布

coderlin_

最新推荐文章于 2023-09-13 16:39:47 发布

阅读量537

点赞数

分类专栏： vue系列

本文链接：https://blog.csdn.net/lin_fightin/article/details/119360311

版权

vue系列专栏收录该内容

18 篇文章 5 订阅

订阅专栏

setup

setup有两个参数

 props: {
    data: String,
  },

 setup(props, context) {
    console.log(props);
  },

第一个参数是props，顾名思义就是获取外界传进的值，因为setup里面不能用this,因为setup的调用是在组件创建之前的，这时候组件实例还没创建生成，故不存在this。
而第二个则是context参数，有三个属性

attrs: 所有非props的attribute，比如父亲调用子组件时传入的属性而子组件的props未定义。

slots: 父组件传递过来的插槽，用作渲染函数返回有作用，后续再讲。

emit 当组件内部需要发出事件如this.$emit，因没this，故用这个代替

返回值

setup的返回值可以直接在template中使用。
比如

setup() {
    //i18n hooks
    //store hooks
    const store = useStore();

    //router hooks
    const roter = useRouter();

    const root = toRef(store.state, "root");
    const changeRoot = () => {
      store.dispatch("setRoot", "改变了");
    };
    const { about } = {
      ...mapState({ about: (state) => (state as any).about }),
    };

    const change = (type: string) => {
      window.localStorage.setItem("i18nKey", type);
      roter.go(0);
    };

    console.log("about", about.call({ $store: store }));

    return { root, changeRoot, change };
  },

这些root changeRoot change，方法，变量都可以在template中使用。跟vue2的data和methods一样。

那如果定义了data又定义了setup呢？那肯定用setup，毕竟setup是vue3的灵魂，源码做了判断，优先从setup里面获取。

setup不能使用this。

官方描述：setup不会找到组件实例，（但其实是组件实例创建出来的了）且在调用的时候，data，computed，methods等都没有被解析。
原码：

  const instance: ComponentInternalInstance =
      compatMountInstance ||
      (initialVNode.component = createComponentInstance(
        initialVNode,
        parentComponent,
        parentSuspense
      ))

先创建了
然后

 setupComponent(instance)


export function setupComponent(
  instance: ComponentInternalInstance,
  isSSR = false
) {
  isInSSRComponentSetup = isSSR

  const { props, children } = instance.vnode
  const isStateful = isStatefulComponent(instance)
  initProps(instance, props, isStateful, isSSR)
  initSlots(instance, children)

  const setupResult = isStateful
    ? setupStatefulComponent(instance, isSSR)
    : undefined
  isInSSRComponentSetup = false
  return setupResult
}

再调用并把Instace传进去，所以说setup不能用this是因为组件还没创建这个点应该是误解的。
这个就是执行setup的源码，


    //执行setup，并且获取结果
    //内部实现就是执行setup,并把instacn.props，setupContext作为参数给setup
    const setupResult = callWithErrorHandling(
      setup,
      instance,
      ErrorCodes.SETUP_FUNCTION,
      [__DEV__ ? shallowReadonly(instance.props) : instance.props, setupContext]
    )

export function callWithErrorHandling(
  fn: Function,
  instance: ComponentInternalInstance | null,
  type: ErrorTypes,
  args?: unknown[]
) {
  let res
  try {
    res = args ? fn(...args) : fn()
  } catch (err) {
    handleError(err, instance, type)
  }
  return res
}

可以看到fn在执行的时候压根就没有call apply去绑定this。

深入响应式Api ref reactive 学习

我们正常使用的data的变量是有响应性的，而我们自己在setup定义的变量却没有响应性，因为data里面的对象会被reactive()函数所包裹，劫持处理。原理是Es6的Proxy代理。vue2是通过Obejct.definedproty来劫持。

所以我们也用reactive函数包裹我们定义的变量

import { defineComponent, reactive } from "vue";

export default defineComponent({
  name: "AA",
  components: {},
  props: {
    data: String,
  },

  setup(props, context) {

      const state = reactive({
          counter: 100
      })
    
  },
});

这样state就拥有了响应性。

ref使用

ref与reactive的区别就是一个是基本数据类型，一个是Object。所以reactive是不能接受一个基本数据类型滴，会报错。

const counter = ref(0)

这样我们的counter就是一个响应式对象了，为什么说是对象，因为ref返回的是一个可变的响应式对象，它内部的值counter，是在ref的value属性中被维护的，也就是说我们要在setup里面用的话应该

  console.log(counter.value);

加上value属性使用。
但是在template却又不用value

  <h2>{{counter}}</h2>

因为外部的template使用ref对象时，实际上帮助我们做了.value处理啦（自动进行解包（浅层解包，就是外层若包裹了一个普通对象则不会解包，只有包裹了reactive对象才会继续解包）），看似是counter，内部是counter.value。

readonly的认识

reactvie和ref获取一个响应式对象，加上readonly会返回原生对象的只读代理，原理就是劫持这些对象的proxy代理的set方法，一旦修改就做对应处理，让其不能修改。

   const readonlyCounter = readonly<Ref<number>>(counter)

一些简单的api

isProxy

检查对象是否是由reactive或者readonly创建的proxy。

isReactive

检查对象是否由reactive创建的。但如果是readonlu创建的，但是包裹的是reactive创建的，则会返回true。

isReadonly

检查是否由readonly创建的制度代理。

toRow

返回reactive或者readonly代理的原始对象。（谨慎使用）

shallowReactive

创建一个响应式代理，只跟踪其自身property的响应性。深层的不会响应式。

shallowReadonly

创建一个只使其自身的property为只读，子属性的子属性还是可读可写的。

toRefs

我们知道，当reactive包裹的对象返回的时候若是解构，如


      const { counter } = reactive({
          counter: 100
      })

这样counter就是去了响应式。

const state = reactive({
          counter: 100
      })
let  { counter } = toRefs(state)

但是通过toRefs来处理后，内部就会创建一个ref(counter)，变成响应式的。
官网是这样回答的：

Vue提供了一个toRefs的函数，可以将reactvie返回的对象中的属性转成ref。而这种做法相当于已经在state.xxx与xxx之间建立一个连接，任何一个修改都会引起另外一个变化。

就是说counter修改，会影响state.counter改变，state.counter修改会引起counter改变。

toRef

toRef是对一个对象中的一个属性转成ref。

跟toRefs的区别就是 toRefs会将对象中的所有属性都变成ref，建立连接。返回一个对象

而toRef可以对其中一个属性转成ref，建立连接。返回一个由ref转化的对象

  const state = reactive({
          counter: 100
      })
      let   counter  = toRef(state, 'counter')

Ref其他的api

unRef

判断这个值是不是ref包裹的，是的话返回value，不是的话返回本身。
相当于： val = isRef(val) ? val.vlaue : value的语法糖。

isRef

判断是否是ref镀锡

shallowRef

创建一个浅层ref对象

triggerRef

手动触发与shallowRef的副作用。triggerRef会触发shallowRef的副作用，比如改变深层的值不会响应式，调用triggerRef(值)就可以产生一次副作用，改变ui的值。

customRef（了解）

创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显示控制。就是自己定义一个类似于ref的，然后规则自己订。

他需要一个工厂函数，接受track和trigger函数尾参数，并且返回一个带有get和set的对象。

import { customRef } from "vue";


//自定义ref
export default function(value: any) {
    //track收集依赖， trigger触发副作用
  return customRef((track, trigger) => {
    return {
      //返回get set给proxy代理
      get() {
        //收集依赖 需要用到改值得时候就表明有依赖，收集
        track(); 
        return value

      },
      set(newValue) {
        setTimeout(()=>{
          value = newValue
          trigger()
        }, 1000)
        //值改变后，触发副作用
      },
    };
  });
}

这样我们的自定义ref就好了，每次赋值的时候i都会慢一秒再赋值。

   const a = customRef(1)

使用跟ref一样。

computed

用法1，传入getter函数

  const aa = computed(()=>a.value*2)

返回的aa而是ref包裹的对象。
用法2 传入对象

 const aa = computed({
      get:()=>a.value*2,
      set(newvalue){
        //aa.value = newvalue  错误做法
        a.value = newvalue //改变源数据才是正确做法，由他再去引起aa得变化
      }
    })

watch & watchEffect

watchEffect自动收集响应式数据得依赖
watch需要手动侦听数据源

使用

watchEffect

  watchEffect(()=>{
      console.log(a.value, 'a改变');
    })

export declare function watchEffect(effect: WatchEffect, options?: WatchOptionsBase): WatchStopHandle;
export declare type WatchEffect = (onInvalidate: InvalidateCbRegistrator) => void;

通过watchEffect得ts定义可以看出，回调函数没n和o这些新值旧值，只有一个onInvalidate回调函数。而watchEffect会在一开始立即执行一次，关键也是这一次执行，在第一次执行的时候，他会收集函数里面的可响应式得对象，比如a，收集到依赖去，然后一改变就会执行回调函数。所以第一次执行就是在检查了（为的是收集依赖）

停止侦听器

通过onInvalidate，

const stop1 = watchEffect((aa)=>{
      console.log(a.value, 'a改变');
       aa(()=>{
        //在这里清楚副作用
      })
    })

参数aa可以执行，里面的cb就可以清除副作用。

export declare function watchEffect(effect: WatchEffect, options?: WatchOptionsBase): WatchStopHandle;

可以看到watchEffect是返回一个停止得函数。他的调用是在修改之前被调用，就是比watchEffect得其他代码执行的早。取消该次得副作用

const stop1 = watchEffect(()=>{
      console.log(a.value, 'a改变');
    })
    setTimeout(()=>{
      console.log('2s后停止');
      
      stop1()
    },2000)

只要调用即可停止。

停止副作用

比如在watchEffect发送网络请求想要取消，只需要

第一次执行等dom挂在完后再执行只需要

watchEffect(
      () => {
        console.log(title.value);
      },
      {
        //等dom更新完再执行watcheffect
        flush: "post",
      }
    );

传入第二个参数。flush设为post即可。默认是pre。还有async(变成同步,很低效）

watch

watch完全等同于vue2得watch。
特点：第一次不会执行，更具体的说明哪个状态发生变化才能触发侦听器执行，可以访问状态变化前后的值。
监听一个reactive对象

 const state = reactive({count: 100, value: 300})

    watch(state,(n,o)=>{
      console.log(n,o);
      
    })

export declare type WatchCallback<V = any, OV = any> = (value: V, oldValue: OV, onInvalidate: InvalidateCbRegistrator) => any;

从watch中的回调函数定义可以看到，有新值以及旧值两个参数。停止跟watchEffect一样。
监听一个reactvie对象的属性

  watch(()=>state.count,(n,o)=>{
      console.log(n,o);
      
    })

vue3不支持“state.count"这样去监听了，因为第一个参数必须是对象。

源码

 return doWatch(source as any, cb, options)

function doWatch(
  source: WatchSource | WatchSource[] | WatchEffect | object,
  cb: WatchCallback | null,
  { immediate, deep, flush, onTrack, onTrigger }: WatchOptions = EMPTY_OBJ
):

if (isRef(source)) {
    getter = () => source.value
    forceTrigger = !!source._shallow
  } else if (isReactive(source)) {
    getter = () => source
    deep = true
  } else if (isArray(source)) {
    isMultiSource = true
    forceTrigger = source.some(isReactive)
    getter = () =>
      source.map(s => {
        if (isRef(s)) {
          return s.value
        } else if (isReactive(s)) {
          return traverse(s)
        } else if (isFunction(s)) {
          return callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER)
        } else {
          __DEV__ && warnInvalidSource(s)
        }
      })
  } else if (isFunction(source)) {
    if (cb) {
      // getter with cb
      getter = () =>
        callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER)
    } else {
      // no cb -> simple effect
      getter = () => {
        if (instance && instance.isUnmounted) {
          return
        }
        if (cleanup) {
          cleanup()
        }
        return callWithAsyncErrorHandling(
          source,
          instance,
          ErrorCodes.WATCH_CALLBACK,
          [onInvalidate]
        )
      }
    }
  }

可以看到watch接受三个参数，一个source，一个cb，一个options，然后真正实行是doWatch函数，他会通过isRef,isReactvie，isArray等的判断判断你传得值是否符合规范。
我们注意到

reactvie对象监听的值，依然是proxy的，因为源码就是直接()=>source返回了，而ref对象则是返回其value值，（）=>source.value。

希望reactvie拿到一个普通的对象。

需要这么做：

  watch(
      () => {
        return { ...state };
      },
      (n, o) => {
        console.log(n, o);
      }
    );

    return { title, state };

第一个参数传入一个函数并且返回一个解构的对象。

可以看下源码：

else if (isFunction(source)) {
    if (cb) {
      // getter with cb
      getter = () =>
        callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER)
    }

当我们传入的source是函数的时候，

export function callWithErrorHandling(
  fn: Function,
  instance: ComponentInternalInstance | null,
  type: ErrorTypes,
  args?: unknown[]
) {
  let res
  try {
    res = args ? fn(...args) : fn()
  } catch (err) {
    handleError(err, instance, type)
  }
  return res
}

该函数直接返回了fn的调用。则调用了

 () => {
        return { ...state };
      },

并且返回。

可以看到还有一个判断就是isArray(source)、

else if (isArray(source)) {
    isMultiSource = true
    forceTrigger = source.some(isReactive)
    getter = () =>
      source.map(s => {
        if (isRef(s)) {
          return s.value
        } else if (isReactive(s)) {
          return traverse(s)
        } else if (isFunction(s)) {
          return callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER)
        } else {
          __DEV__ && warnInvalidSource(s)
        }
      })
  }

也就是说我们还可以传入一个数组，表示可以监听多个属性。

 watch([state, title], (n, o) => {
      console.log(n, o);
    });

这样数组中任意一个值改变都会触发watch，参数则为数组，对应改变的值。

深度监听

 watch([state, title], (n, o) => {
      console.log(n, o);
    }, {
      deep: true,
      immediate: true
    });

watch可以传入第三个参数option，配置对象，deep表示进行深监听，immediate表示初始化就执行一次。
而reactvie默认是会深度监听的（往上看源码，有deep=true），而解构出来的话就失去了深度监听，所以就需要第三个参数deep:true了。

ref（不是创建响应对象那个ref哦，而是拿到dom元素的ref）

还是一样用ref，

    const title = ref(null);
    onMounted(() => {
      console.log("title", title.value);
    });
    return { title };

然后这个title绑定在dom上就行

  <div ref="title">title</div>

不用加v-bind哦
这种写法让我想起了react得useRef

coderlin_

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
深入vue3学习(2)

setupsetup有两个参数 props: { data: String, }, setup(props, context) { console.log(props); },第一个参数是props，顾名思义就是获取外界传进的值，因为setup里面不能用this,因为setup的调用是在组件创建之前的，这时候组件实例还没创建生成，故不存在this。而第二个则是context参数，有三个属性attrs: 所有非props的attribute，比如父亲调用子组件时传入的属
复制链接

扫一扫