Vue3 - 快速入门 [2] (10分钟带你上手 Vue3 补充 )

Hisen
504 阅读3分钟

前言

针对 Vue3，其实在我的第一篇 Vue3 的文章 10分钟带你上手Vue3 中均有详细分享如何快速上手，实践开发，这篇文章只做一些适当补充，查漏补缺

工程搭建和工程结构在前章也有分享，有兴趣的可以传送门 ~ 创建工程

补充 setup 函数结构

setup 是 vue3 中新增的一个选项，也是 composition Api ( 组合api ) 的入口函数，具体的结构是这样的

<template>
  <h2>setup</h2>
</template>

<script>
export default {
  setup () {
    return {}
  }
}
</script>

补充 setup 参数 [ props，context ]

在 10分钟带你上手vue3 中我使用了注释代码的形式，其实还可以用解构的写法

代码示例

<script>
export default {
              // setup (props, context) {
                // Attribute (非响应式对象，等同于 $attrs)
                // console.log(context.attrs)

                // 插槽 (非响应式对象，等同于 $slots)
                // console.log(context.slots)

                // 触发事件 (方法，等同于 $emit)
                // console.log(context.emit)

                // 暴露公共 property (函数)
                // console.log(context.expose)

                // return {}
              // }
      
    // 解构的写法
    setup (props, { attrs, slots, emit, expose }) {
        // Attribute (非响应式对象，等同于 $attrs)
         console.log(attrs)

        // 插槽 (非响应式对象，等同于 $slots)
         console.log(slots)

        // 触发事件 (方法，等同于 $emit)
         console.log(emit)

        // 暴露公共 property (函数)
         console.log(expose)

         return {}
    }
}
</script>

补充 toRef ，toRefs 普通变量变响应式

  • toRef 是将一个普通类型的变量或者引用类型内部的值变成 ref 响应式
  • toRefs 顾名思义，则是将一个引用类型的数据变成响应式
<template>
  <!-- <h2 @click="refCount++">{{refCount}}</h2>
  <h3 @click="reactiveObjFunc">{{`${name} - ${demo}`}}</h3>
  <h3>{{computedValue}}</h3> -->
  <h2>{{reactiveObj.name}} - {{reactiveObj.demo}}</h2>
  <h2>{{toRefName}} - {{toRefDemo}}</h2>
  <h2>{{`${name} - ${demo}`}}</h2>
</template>

<script>
import {
  toRefs, reactive, toRef
} from "vue"
export default {
  setup () {
    let reactiveObj = reactive({ name: "Hisen", demo: "Vue3" })

    let toRefName = toRef(reactiveObj, "name")  // reactiveObj.name 不行
    let toRefDemo = toRef(reactiveObj, "demo")  // 同上
    console.log("toRef-toRefName", toRefName)
    console.log("toRef-toRefDemo", toRefDemo)

    let toRefsObj = toRefs(reactiveObj)
    console.log("toRefs", toRefsObj)

    return {
      ...toRefs(reactiveObj),
      reactiveObj,
      toRefName,
      toRefDemo,
      ...toRefs(toRefsObj)
    }
  }
}
</script>

效果，看打印信息，toRef 将变量变成了 ref 响应式类型，toRefs 则是直接改变了一个对象

image.png

补充 toRefs 巧妙结构

补充 在 setup 函数中，接收参数 props ，因为 props 是响应式的，所以不能使用 ES6 解构，它会消除 prop 的响应性, 如果需要解构 prop，可以在 setup 函数中使用 toRefs 函数来实现解构

如：

import { toRefs } from 'vue'

setup(props) {
  const { title } = toRefs(props)
  console.log(title.value)
}

补充 生命周期钩子 vue2 + vue3

了解 通过官方的一张图来了解一下，生命周期钩子函数的微弱变化，没有了创建前后钩子，在 10分钟带你上手vue3 中，我只是简单的实践了几个钩子函数

image.png

当然了，在 vue3 中也可以像 vue2 使用钩子函数一样的方式使用，丝毫不影响效果，根据上图，我们来简单实践一下在 setup 函数中如何使用生命周期钩子

<template>
  <h2 @click="refCount++">{{refCount}}</h2>
</template>

<script>
// 这里import先不需要关注,下文会详解
import {
  ref,onBeforeMount,onMounted,
  onBeforeUpdate, onUpdated
} from "vue"
export default {
  setup () {
    console.log("setup")
    onBeforeMount(() => console.log("挂载前"))
    onMounted(() => console.log("挂载后"))
    onBeforeUpdate(() => console.log("更新前"))
    onUpdated(() => console.log("更新后"))
    
    // 这里先不用关注，为了实践更新前后生命周期
    let refCount = ref(0)
    return {
       refCount
    }

  }
}
</script>

image.png

补充 监听 [ watch ]

在 10分钟带你上手vue3 中，我可能写的比较麻烦和繁琐，虽然说明了具体的使用方式和区别，但是在这里，我觉得有必要再简单的下一个小例子

<template>
  <h2 @click="refCount++">{{refCount}}</h2>
  <h3 @click="reactiveObjFunc">{{`${name} - ${demo}`}}</h3>
</template>

<script>
import {
  ref, toRefs, reactive, watch
} from "vue"
export default {
  setup () {

    let refCount = ref(0)
    let reactiveObj = reactive({ name: "Hisen", demo: "Vue3" })

    watch(refCount, (n, o) => {
      console.log(n, o)
    }, {
      // deep、immediate 和 flush
    })

    watch(() => reactiveObj, (n, o) => {
      console.log(n, o)
    }, {
      deep: true
      // deep、immediate 和 flush
    })
    
    const reactiveObjFunc = () => {
      reactiveObj.name = "ack"
    }

    return {
      refCount,
      ...toRefs(reactiveObj),
      reactiveObjFunc
    }

  }
}
</script>

效果

image.png

补充 watchEffect

<template>
  <h2 @click="refCount++">{{refCount}}</h2>
</template>

<script>
import {
  ref, watchEffect
} from "vue"
export default {
  setup () {
    let refCount = ref(0)

    watchEffect(() => {
      let a = refCount.value
      console.log("watchEffect ",a)
    })

    return {
      refCount
    }
  }
}
</script>

效果

image.png

watchEffect 默认执行一次，跟 computed 有点类似，区别是 computed 是计算属性，需要返回值，而 watchEffect 则是使用过程中有依赖到响应式变量，就会触发，注重过程

补充 计算属性

在 10分钟带你上手vue3 中, 我只一笔带过，说计算属性是直接创建了一个可读写的新变量（依赖已声明的变量），其实它和 vue2 的 computed 使用上区别不大，也可以直接 return 一个新值（依赖已声明的变量）

<template>
  <h2 @click="refCount++">{{refCount}}</h2>
  <h3 @click="reactiveObjFunc">{{`${name} - ${demo}`}}</h3>
  <h3>{{computedValue}}</h3>
</template>

<script>
import {
  ref, toRefs, reactive, watch, computed
} from "vue"
export default {
  setup () {

    let refCount = ref(0)
    let reactiveObj = reactive({ name: "Hisen", demo: "Vue3" })

    watch(refCount, (n, o) => {
      console.log(n, "*", o, "=", computedValue.value)
    }, {
      // deep、immediate 和 flush
    })

    watch(() => reactiveObj, (n, o) => {
      console.log(n, o)
    }, {
      deep: true
      // deep、immediate 和 flush
    })

    const reactiveObjFunc = () => {
      reactiveObj.name = "ack"
    }

    // 计算属性
    let computedValue = computed(() => {
      return refCount.value * 10
    })

    return {
      refCount,
      ...toRefs(reactiveObj),
      reactiveObjFunc,
      computedValue
    }

  }
}
</script>

效果

image.png

其它正文在这里 10分钟带你上手vue3

其实这是一篇专栏体系文章，因为我后边还会分享一下 Vue3 的其它新特性，走个过渡效果......

小小鼓励，大大成长，欢迎点赞，收藏

avatar
文章
阅读
粉丝