战争部分Vue3.0｜项目概述

希望你能明白vue3.0文档是最好的实用文章，希望你能先阅读vue3.0文档

谦卑个人3.0更新在写sfc的时候，可以说没有什么变化，主要变化在于api的构成

开始

• 几年前，公司启动了一个新项目。这是一个常规的业务系统。我很想加入 3.0。可惜施工时间紧，没去到ts（真希望能去tsx，在这里叹息），还有个小自行车。然而，这可以被视为一个步骤。
• 本文主要整理列出了实际开发中遇到的一些问题，所以vue3.0实践大佬无需继续阅读。这是为像我一样第一次使用vue3.0进行项目开发的同学准备的。 （官方例子有很多）

setup 函数接受两个 context prop 参数

道具

• props 接收到的值是响应式的，但正因为如此，使用es6结构后会失去响应性
• 但它可以被 toRefs 销毁以保持响应

    import { toRefs } from 'vue'

    export default {
      props: {
        currentId: {
          type: String,
          default: ''
        }
      },
      setup(props) {
      const { currentId } = toRefs(props)
        console.log(currentId.value)
      }
    }

 

上下文上下文

• context上下文暴露了三个组件的属性：attrs（非响应对象）、slot（非响应对象）、emit
• 文档说，由于这不是响应式结构，因此您可以确定

    // 可以这样写
    export default {
      setup(props, context) {
        // Attribute (非响应式对象)
        console.log(context.attrs)

        // 插槽 (非响应式对象)
        console.log(context.slots)

        // 触发事件 (方法)
        console.log(context.emit)
      }
    }

    // 或者这样写 
    export default {
      setup(props, { attrs, slots, emit }) {
        ...
      }
    }
 

组件列表

分为同步和异步两种，当然还有一些更高级的东西这里就不介绍了

    // 同步（个人认为的同步）
    import test1 from './test1'
    export default {
      // 注册组件
      components: { test1 }
      }
    }

    // 异步注册 defineAsyncComponent api
    <script>
    import { ref, defineAsyncComponent } from 'vue'
    export default {
      // 注册组件
      components: {
        test1: defineAsyncComponent(() => import('./test1'))
        }
    }
    </script>

 

参考

• ref 这次的火灾很特别。当作用于组件时，它会找到组件本身，并可以创建响应对象。

在设置中获取组件引用对象

• 在组件中声明引用
• 在设置和导出功能中创建一个与组件ref同名的ref对象

    <template>
      <!-- 同名ref -->
      <test1 ref="test1Ref"></test1>
    </template>

    <script>
    import { ref } from 'vue'
    // 导入组件
    import test1 from './test1'
    export default {
      // 注册组件
      components: { test1 },
      setup () {
        // 创建同名ref
        const test1Ref = ref(null)

        // 导出ref
        return {
          test1Ref
        }
      }
    }
    </script>

    <style scoped>

    </style>
 

• 需要注意的是，异步注册的组件无法正确获取对象ref

setup函数结合el形式使用，不要让ref和model绑定同一个对象

• 顺便说一句，这实际上是 2.x 的一个错误。我总是喜欢将表单引用绑定到名为
的模型
• 这会引起一个很奇怪的现象

  • 如果手机循环破碎的玻璃堆Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.

  • Form无法赋值（因为ref是只读对象，任务会给出警告）

监控数据

观看

• 这个其实和2.0没什么区别。需要注意的是，接收反应对象
• 立即 无论值是否变化都立即执行一次
• 深度监控通常与
对象一起使用

    setup (props) {
        watch(() => props.id, () => {
          console.log(props.id)
        }, { immediate: true })
        return {}
      }
 

watchEfek

• 看起来比 watch watchEffect 更聪明。一个靠别人吃饭，一个自己做饭吃。
• 官方说，反应式跟踪依赖关系时立即运行该函数，并在依赖关系发生变化时重新运行它们。我的理解是，你把要更新的列放在函数watchEffect中。当字段改变时，函数watchEffect会自动执行

    const count = ref(0)

    watchEffect(() => console.log(count.value))
    // -> logs 0

    setTimeout(() => {
      count.value++
      // -> logs 1
    }, 100)
 

获取当前实例

• 这是一个神奇的属性。官网介绍getCurrentInstance允许访问内部组件实例，这些实例对于高级用法或库创建者很有用。
• 很重要的问题是，很多人用这个API来获取const { ctx } = getCurrentInstance()等根实例，但是这里获取的ctx只能在开发模式下获取。打包后就这样，不能去根了。
• 如果项目没有添加ts开发环境，可以使用getCurrentInstance获取ctx，在ts项目中const { ctx } = getCurrentInstance()这个语句会报错，因为ctx不存在，所以没有ctx效果。已导出。
  • 
• 我本来想写这个是有特定原因的。有一篇文章已经解释了，我就不打扰了。用力点击。那么你就不能使用ctx来获取根实例。我如何获得像$router、$store这样的物体？请往下看？

从

设置获取对象

，例如 $router、$store 和 el Message

• 在模板中，仍然可以通过$xxx获取对应的实例对象
• 在getCurrentInstance上使用proxy

获取$路由器

    import { reactive } from 'vue'
    // 引入 vue-router
    import { useRouter, useRoute } from 'vue-router'
    export default {
      setup () {
        // 获取 router对象
        // router 大致等于  this.$router , route 同理
        // 跳转  router.push({xxx})
        const router = reactive(useRouter())
        // 获取 route对象
        const route = reactive(useRoute())

        // 正常是无需导出的
        return {
          router,
          route
        }
    }
 

请求vuex

    import { reactive } from 'vue'
    // 引入vuex
    import { useStore } from 'vuex'
    export default {

      setup () {
        // 获取store 对象 store 等同于 this.$store
        const store = reactive(useStore())
        // 获取state 数据
        const.log(store.state.xxx)
        // 提交 commit
        const.log(store.commit('xxxxx'))
        // 正常无需导出
        return {
          store
        }
      }
 

获得加分元素Message

• Eel消息文档强制点击
• 这个其实在element-plus官网文档里说得很清楚了，element-ui支持Message，需要的时候可以引入
• Message 消息提醒
  
• MessageBox 弹出框架
  
• Notification新闻
  
的使用示例

    import { ElMessage, ElMessageBox } from 'element-plus'
    export default {
      setup () {
        ElMessage.error('这是一个错误')
        ElMessage({ type: 'error', message: '这是一个错误' })
        // 上面这两个是一样的  看个人使用习惯
        ElMessage.success('这是一个成功的提示')
        ElMessage.info('这是一个信息提示')

        // ElMessageBox 包含 alert、 confirm、prompt 文档也有写出
        ElMessageBox.alert('这是一段内容', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
            ElMessage.info(`action: ${action}`)
          }
        })
      }
    }
 

稍后添加。 。 。

本文参与“2021年掘金春季招募活动”，点击查看活动详情