vue3 文档梳理快速入门

目录
  • 一、setup
    • 1. setup 函数中的第一个参数 —— props
    • 2.  contextcontext
  • 二、setup 函数的返回值
    • 1.setup 函数的返回值 —— 对象
  • 三、响应式系统 API
    • 1. reactive
    • 2. ref
    • 3. computed
    • 4. readonly
    • 5. watchEffect
      • 5.1 停止侦听
      • 5.2 清除副作用
      • 5.3 副作用刷新时机
      • 5.4  侦听器调试
    • 6. watch
      • 6.1 侦听多个数据源
      • 6.2 与 watchEffect 共享的行为

一、setup

组合式 API:

  • setup 选项应该为一个函数
  • setup 选项函数接受两个参数: props context
  • setup 选项函数需要返回要暴露给组件的内容
  • setup 需要使用 return 返回,才能给组件使用,包含数据和方法

1. setup 函数中的第一个参数 —— props

setup 函数中的 props 是响应式的,当传入新的 prop 时,它将被更新

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

但是,因为 props 是响应式的,你不能使用 ES6 解构,因为它会消除 prop 的响应性。
如果需要解构 prop,可以通过使用 setup 函数中的 toRefs 来安全地完成此操作。

import { toRefs } from 'vue'

setup(props) {
    const { title } = toRefs(props)

    console.log(title.value)
}

2.  contextcontext

setup 函数中的第二个参数 —— contextcontext 上下文是一个普通的 JavaScript 对象,它暴露三个组件的 property

xport default {
  setup(props, context) {
    // Attribute (非响应式对象)
    console.log(context.attrs)

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

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

context 是一个普通的 JavaScript 对象,也就是说,它不是响应式的,这意味着你可以安全地对 context 使用 ES6 解构

export default {
  setup(props, { attrs, slots, emit }) {
    ...
  }
}

二、setup 函数的返回值

1.setup 函数的返回值 —— 对象

如果 setup 返回一个对象,则可以在组件的模板中像传递给 setup props property 一样访问该对象的 property:

<template>
  <!-- 模板中使用会被自动解开,所以不需要 .value  -->
  <div>{{ readersNumber }} {{ book.title }}</div>
</template>

<script>
  import { ref, reactive } from 'vue'

  export default {
    setup() {
      const readersNumber = ref(0)
      const book = reactive({ title: 'Vue 3 Guide' })

      // expose to template
      return {
        readersNumber,
        book
      }
    }
  }
</script>

注意:从 setup 返回的 refs 在模板中访问时是被自动解开的,因此不应在模板中使用 .value

三、响应式系统 API

1. reactive

reactive() 接收一个普通对象然后返回该普通对象的响应式代理。等同于 2.x 的 Vue.observable()

const obj = reactive({ count: 0 })

响应式转换是“深层的”:会影响对象内部所有嵌套的属性。基于 ES2015 的 Proxy 实现,返回的代理对象不等于原始对象。建议仅使用代理对象而避免依赖原始对象。

<template>
  <div id="app">{ state.count }</div>
</template>

<script>
import { reactive } from 'vue'
export default {
  setup() {
    // state 现在是一个响应式的状态
    const state = reactive({
      count: 0,
    })
  }
}
</script>

2. ref

接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

如果传入 ref 的是一个对象,将调用 reactive 方法进行深层响应转换。

模板中访问:

ref 作为渲染上下文的属性返回(即在setup() 返回的对象中)并在模板中使用时,它会自动解套,无需在模板内额外书写 .value:

<template>
  <div>{{ count }}</div>
</template>

<script>
  export default {
    setup() {
      return {
        count: ref(0),
      }
    },
  }
</script>

作为响应式对象的属性访问:

当 ref 作为 reactive 对象的 property 被访问或修改时,也将自动解套 value 值,其行为类似普通属性:

const count = ref(0)
const state = reactive({
  count,
})

console.log(state.count) // 0

state.count = 1
console.log(count.value) // 1

注意:如果将一个新的 ref 分配给现有的 ref, 将替换旧的 ref

const otherCount = ref(2)

state.count = otherCount
console.log(state.count) // 2
console.log(count.value) // 1

注意:当嵌套在 reactive Object 中时,ref 才会解套。从 Array 或者 Map 等原生集合类中访问 ref 时,不会自动解套:

const arr = reactive([ref(0)])
// 这里需要 .value
console.log(arr[0].value)

const map = reactive(new Map([['foo', ref(0)]]))
// 这里需要 .value
console.log(map.get('foo').value)

类型定义:

interface Ref<T> {
  value: T
}

function ref<T>(value: T): Ref<T>

有时我们可能需要为 ref 做一个较为复杂的类型标注。我们可以通过在调用 ref 时传递泛型参数来覆盖默认推导:

const foo = ref<string | number>('foo') // foo 的类型: Ref<string | number>

foo.value = 123 // 能够通过!

3. computed

使用响应式 computed API 有两种方式:

(1)传入一个 getter 函数,返回一个默认不可手动修改的 ref 对象。

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // 错误!

(2)传入一个拥有 get set 函数的对象,创建一个可手动修改的计算状态。

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  },
})

plusOne.value = 1
console.log(count.value) // 0

类型定义:

// 只读的
function computed<T>(getter: () => T): Readonly<Ref<Readonly<T>>>

// 可更改的
function computed<T>(options: {
  get: () => T
  set: (value: T) => void
}): Ref<T>

4. readonly

传入一个对象(响应式或普通)或 ref,返回一个原始对象的只读代理。一个只读的代理是“深层的”,对象内部任何嵌套的属性也都是只读的。

const original = reactive({ count: 0 })

const copy = readonly(original)

watchEffect(() => {
  // 依赖追踪
  console.log(copy.count)
})

// original 上的修改会触发 copy 上的侦听
original.count++

// 无法修改 copy 并会被警告
copy.count++ // warning!

5. watchEffect

立即执行传入的一个函数,并响应式追踪其依赖,并在其依赖变更时重新运行该函数。

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> 打印出 0

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

5.1 停止侦听

watchEffect 在组件的 setup() 函数或生命周期钩子被调用时, 侦听器会被链接到该组件的生命周期,并在组件卸载时自动停止。

在一些情况下,也可以显式调用返回值以停止侦听:

const stop = watchEffect(() => {
  /* ... */
})

// 之后
stop()

5.2 清除副作用

有时副作用函数会执行一些异步的副作用, 这些响应需要在其失效时清除(即完成之前状态已改变了)。所以侦听副作用传入的函数可以接收一个 onInvalidate 函数作入参, 用来注册清理失效时的回调。当以下情况发生时,这个失效回调会被触发:

  • 副作用即将重新执行时
  • 侦听器被停止 (如果在 setup() 或 生命周期钩子函数中使用了 watchEffect, 则在卸载组件时)
watchEffect((onInvalidate) => {
  const token = performAsyncOperation(id.value)
  onInvalidate(() => {
    // id 改变时 或 停止侦听时
    // 取消之前的异步操作
    token.cancel()
  })
})

我们之所以是通过传入一个函数去注册失效回调,而不是从回调返回它(如 React useEffect 中的方式),是因为返回值对于异步错误处理很重要。

在执行数据请求时,副作用函数往往是一个异步函数:

const data = ref(null)
watchEffect(async () => {
  data.value = await fetchData(props.id)
})

我们知道异步函数都会隐式地返回一个 Promise,但是清理函数必须要在 Promise resolve 之前被注册。另外,Vue 依赖这个返回的 Promise 来自动处理 Promise 链上的潜在错误。

5.3 副作用刷新时机

Vue 的响应式系统会缓存副作用函数,并异步地刷新它们,这样可以避免同一个 tick 中多个状态改变导致的不必要的重复调用。在核心的具体实现中, 组件的更新函数也是一个被侦听的副作用。当一个用户定义的副作用函数进入队列时, 会在所有的组件更新后执行:

<template>
  <div>{{ count }}</div>
</template>

<script>
  export default {
    setup() {
      const count = ref(0)

      watchEffect(() => {
        console.log(count.value)
      })

      return {
        count,
      }
    },
  }
</script>

在这个例子中:

count 会在初始运行时同步打印出来
更改 count 时,将在组件更新后执行副作用。

请注意:初始化运行是在组件 mounted 之前执行的。因此,如果你希望在编写副作用函数时访问 DOM(或模板 ref),请在 onMounted 钩子中进行:

onMounted(() => {
  watchEffect(() => {
    // 在这里可以访问到 DOM 或者 template refs
  })
})

如果副作用需要同步或在组件更新之前重新运行,我们可以传递一个拥有 flush 属性的对象作为选项(默认为 'post'):

// 同步运行
watchEffect(
  () => {
    /* ... */
  },
  {
    flush: 'sync',
  }
)

// 组件更新前执行
watchEffect(
  () => {
    /* ... */
  },
  {
    flush: 'pre',
  }
)

5.4  侦听器调试

onTrack onTrigger 选项可用于调试一个侦听器的行为。

  • 当一个 reactive 对象属性或一个 ref 作为依赖被追踪时,将调用 onTrack
  • 依赖项变更导致副作用被触发时,将调用 onTrigger

这两个回调都将接收到一个包含有关所依赖项信息的调试器事件。建议在以下回调中编写 debugger 语句来检查依赖关系:

watchEffect(
  () => {
    /* 副作用的内容 */
  },
  {
    onTrigger(e) {
      debugger
    },
  }
)

onTrack onTrigger 仅在开发模式下生效。

类型定义:

function watchEffect(
  effect: (onInvalidate: InvalidateCbRegistrator) => void,
  options?: WatchEffectOptions
): StopHandle

interface WatchEffectOptions {
  flush?: 'pre' | 'post' | 'sync'
  onTrack?: (event: DebuggerEvent) => void
  onTrigger?: (event: DebuggerEvent) => void
}

interface DebuggerEvent {
  effect: ReactiveEffect
  target: any
  type: OperationTypes
  key: string | symbol | undefined
}

type InvalidateCbRegistrator = (invalidate: () => void) => void

type StopHandle = () => void

6. watch

watch API 完全等效于 2.x this.$watch (以及 watch 中相应的选项)。watch 需要侦听特定的数据源,并在回调函数中执行副作用。默认情况是懒执行的,也就是说仅在侦听的源变更时才执行回调。

  • 对比 watchEffect,watch 允许我们:
  1. 懒执行副作用;
  2. 更明确哪些状态的改变会触发侦听器重新运行副作用;
  3. 访问侦听状态变化前后的值。
  • 侦听单个数据源
  1. 侦听器的数据源可以是一个拥有返回值的 getter 函数,也可以是 ref:
// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

6.1 侦听多个数据源

watcher 也可以使用数组来同时侦听多个源:

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

6.2 与 watchEffect 共享的行为

watch watchEffect 在停止侦听, 清除副作用 (相应地 onInvalidate 会作为回调的第三个参数传入),副作用刷新时机 和 侦听器调试 等方面行为一致.

类型定义:

// 侦听单数据源
function watch<T>(
  source: WatcherSource<T>,
  callback: (
    value: T,
    oldValue: T,
    onInvalidate: InvalidateCbRegistrator
  ) => void,
  options?: WatchOptions
): StopHandle

// 侦听多数据源
function watch<T extends WatcherSource<unknown>[]>(
  sources: T
  callback: (
    values: MapSources<T>,
    oldValues: MapSources<T>,
    onInvalidate: InvalidateCbRegistrator
  ) => void,
  options? : WatchOptions
): StopHandle

type WatcherSource<T> = Ref<T> | (() => T)

type MapSources<T> = {
  [K in keyof T]: T[K] extends WatcherSource<infer V> ? V : never
}

// 共有的属性 请查看 `watchEffect` 的类型定义
interface WatchOptions extends WatchEffectOptions {
  immediate?: boolean // default: false
  deep?: boolean
}

到此这篇关于vue3 文档梳理快速入门的文章就介绍到这了,更多相关vue3 文档梳理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-09-14

vue3.0+echarts实现立体柱图

前言: vue3.0实现echarts立体柱图 实现效果: 实现步骤: 1.安装echarts cnpm i --save echarts 2.页面定义容器 <template> <div ref="echart" class="echartDiv"></div> </template> 3.js中引入echarts import * as echarts from 'echarts'; 组件完整源码: <tem

详解vue3.2新增的defineCustomElement底层原理

目录 Web Components customElements 概述 HTMLTemplateElement 内容模板元素 概述 常用属性 ShadowRoot 概述 Web Components Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们. 相当于是浏览器原生的定义组件的方式,不用通过vue或者react这些框架实现组件的定义 customElements 概述 customElements 是Wi

Vue3+script setup+ts+Vite+Volar搭建项目

目录 使用 Vite 创建 vue + ts 项目 Vue 3 的三种语法 Option API Composition API script setup(Composition API 的语法糖) 安装 Volar 结尾 好久没有写了,最近看到Vue3.2 发布了,害,又要开始卷了么. 其实我自己本身还没有使用过Vue3 做过实际的项目开发,然鹅又出新东西了--, 新时代农民工真的是左手工作,右手游戏,还要用jio去学习呢. 什么? 你说谈对象? xswl,我特么一个农民工也配谈对象? 不卷不

vue3实现一个todo-list

目录 功能介绍 相关代码 总结 实现方式不是最优,主要是为了学习vue3的一些新语法以及属性 功能介绍 相关代码 index.vue <template> <div class="todo-list"> <el-card class="box-card"> <template #header> <div class="card-header"> <span>工作计划</

vue3.0+vant3.0快速搭建项目的实现

目录 一.项目的搭建 二.vue3体验+vant引入 2020年09月18日,vue.js 3.0正式发布,去网上看了看关于3.0的教程都不够完整,但其实vuecli最新版已经支持了vue3.0项目的快速搭建,这篇文章将带你了解一下vue3.0有哪些新的改变以及如何快速搭建vue3.0项目. 一.项目的搭建 1.首先,nodejs的安装不用我多说了吧,nodejs官网地址. 2.既然vuecli最新版已经可以快速搭建3.0了,那怎么升级到最新版呢?vue-cli官网地址,不知道vue-cli版本

Vue3导航栏组件封装实现方法

在Vue3中封装一个导航栏组件,并且实现,随着滚动条滚动实现一个吸顶效果,供大家参考 导航栏组件的效果图: 滚动条滚动以后的吸顶效果示意图: 具体代码展示: <template> <header class="app-header"> <div class="container"> <!-- 头部导航区域 --> <HeaderNavCommon /> <div class="search&

vue3单文件组件中style特性的深入讲解

目录 style scoped style module 状态驱动的动态css 总结 style scoped 需要注意的有: 样式不会影响到其他组件,只会在当前组件生效. 子组件的根元素会同时 受父组件的作用域样式,和子组件的作用域样式影响. 这样做的目的是让父组件可以调整子组件的布局. 存在3个特殊的选择器: 1. 深度选择器:可以影响到子组件. 使用伪类 => :deep(cls: 影响的选择器) .a :deep(.b) { ... } 2. 插槽选择器: 可以影响到插槽内容的样式.使用

Vue3 + TypeScript 开发总结

目录 Vue3 + TypeScript 学习 一, 环境配置 1.1 安装最新 Vue 脚手架 1.2 创建Vue3 项目 二, 进击Vue3 2. 1 Vue 2 局限性 2.2 Vue 3 如何解决Vue 2 局限 三,Vue3 Composition Ap i 3.1 关于 Composition Api 3.2 什么时候使用Composition Api 四,Composition Api 必备基础 4.2 ref 创建响应式变量 4.3 生命周期 4.4 watch 4.5 comp

Vue3实现图片放大镜效果

本文实例为大家分享了Vue3实现图片放大镜效果的具体代码,供大家参考,具体内容如下 实现效果 代码 <template> <div class="goods-image"> <!-- 大图容器 --> <div class="large" :style="[ { backgroundImage: `url(${imageList[curId]})`, backgroundPositionX: position.ba

一文带你了解vue3.0响应式

目录 使用案例 reactive API相关的流程 reactive createReactiveObject 创建响应式对象 mutableHandlers 处理函数 get函数 get函数的的调用时机 track 收集依赖 set函数 trigger 分发依赖 get和副作用渲染函数关联 副作用渲染函数的执行过滤 结尾 我们知道Vue 2.0是利用Ojbect.defineProperty对对象的已有属性值的读取和修改进行劫持,但是这个API不能监听对象属性的新增和删除,此外为了深度劫持对象

Vue3 composition API实现逻辑复用的方法

Composition API实现逻辑复用的步骤: 抽离逻辑代码到一个函数,这个函数命令约定为useXXX格式(这点同React Hooks) 在setup中引用函数useXXX 举下例子,定义一个获取当前鼠标位置的方法 第一种,直接使用ref定义的useMousePosition: 这种方式,导出和导入都可以随意解构 // useMousePosition.js import { ref, onMounted, onUnmounted } from 'vue' // 1. 定义一个函数,抽离逻

Vue3+TypeScript实现递归菜单组件的完整实例

目录 前言 需求 实现 首次渲染 点击菜单项 样式区分 默认高亮 数据源变动引发的 bug 完整代码 App.vue 总结 前言 小伙伴们好久不见,最近刚入职新公司,需求排的很满,平常是实在没时间写文章了,更新频率会变得比较慢. 周末在家闲着无聊,突然小弟过来紧急求助,说是面试腾讯的时候,对方给了个 Vue 的递归菜单要求实现,回来找我复盘. 正好这周是小周,没想着出去玩,就在家写写代码吧,我看了一下需求,确实是比较复杂,需要利用好递归组件,正好趁着这 个机会总结一篇 Vue3 + TS 实现递

使用Vite2+Vue3渲染Markdown文档的方法实践

目录 自定义 Vite 插件 使用 vite-plugin-markdown Import Front Matter attributes Import compiled HTML (Mode.HTML) Import ToC metadata (Mode.TOC) Import as a React component (Mode.REACT) Import as a Vue component (Mode.VUE) 写在最后 大部分使用 Vite2 的开发者遇到的一个问题,就是文档里并没有相

Vue3 之 Vue 事件处理指南

目录 一.基本事件处理 二.向父组件发出自定义事件 三.鼠标修饰符 四.键盘修饰符 五.系统修饰符 六.事件修饰符 一.基本事件处理 使用v-on指令(简称@),我们可以监听DOM事件并运行处理程序方法或内联Javascript. // v-on 指令 <div v-on:click='handleClick' /> // OR <div @click='handleClick' /> 二.向父组件发出自定义事件 任何Web框架中的常见用例都是希望子组件能够向其父组件发出事件,这也

Vue 事件处理操作实例详解

本文实例讲述了Vue 事件处理操作.分享给大家供大家参考,具体如下: 1 监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. html: <div id="app1"> <button v-on:click="counter +=1">递增</button> <p>按钮已被点击 {{ counter }} 次.</p> </div> js: va

Vue事件处理原理及过程详解

Vue事件监听的方式貌似违背了关注点分离(separation of concern)的传统理念.实际上,所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上,它不会导致维护上的困难,使用v-on有以下好处: 1.扫一眼HTML模板便能轻松定位在JS代码里对应的方法. 2.无须在JS里手动绑定事件,ViewModel代码可以是非常纯粹的逻辑,和DOM完全解耦,更易于测试. 3.当一个ViewModel被销毁时,所有的事件处理器都会自动被删除,无须担心自己如何清理它们.

vue ssr 指南详读

本帖说明 该贴是对vue SSR Guide解读和补充,对于官网文档已有内容会以引用方式体现.由于官网demo在国内无法运行,该贴最后也提供了一个完整的可以运行的demo,帖子中提到的代码均是来自于该demo,供学习交流. 介绍 什么是服务器端渲染(SSR)? Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"

详解Vue实战指南之依赖注入(provide/inject)

案例 UI美眉说咱家的选项菜单太丑了,小哥哥能不能美化一下呀,洒家自然是说小意思啦~ 自定义一个select组件,so easy~ 简单粗暴型: <el-select v-model="favourite" :option="[]"></el-select> option作为数据进来就ok啦. 然后发现下列问题: key-value,不是所有的接口都是id-name option要disabled 怎么办? option存在几种情况怎么办?

Vue精简版风格指南(推荐)

前面的话 Vue官网的风格指南按照优先级(依次为必要.强烈推荐.推荐.谨慎使用)分类,且代码间隔较大,不易查询.本文按照类型分类,并对部分示例或解释进行缩减,是Vue风格指南的精简版 组件名称 [组件名为多个单词](必要) 组件名应该始终是多个单词的,根组件 App 除外. 这样做可以避免跟现有的以及未来的 HTML 元素相冲突,因为所有的 HTML 元素名称都是单个单词的 //bad Vue.component('todo', {}) //good Vue.component('todo-it

详解vue的双向绑定原理及实现

前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图来吸引各位: 代码: 效果图: 是不是看起来跟vue的使用方式差不多?接下来就来从原理到实现,从简到难一步一步来实现这个SelfVue.由于本文只是为了学习和分享,所以只是简单实现下原理,并没有考虑太多情况和设计,如果大家有什么建议,欢迎提出来. 本文主要介绍两大内容: 1. vue数据双向绑定的原

在Vue项目中使用snapshot测试的具体使用

snapshot介绍 snapshot测试又称快照测试,可以直观地反映出组件UI是否发生了未预见到的变化.snapshot如字面上所示,直观描述出组件的样子.通过对比前后的快照,可以很快找出UI的变化之处. 第一次运行快照测试时会生成一个快照文件.之后每次执行测试的时候,会生成一个快照,然后对比最初生成的快照文件,如果没有发生改变,则通过测试.否则测试不通过,同时会输出结果,对比不匹配的地方. jest中的快照文件以为snap拓展名结尾,格式如下(ps: 在没有了解之前,我还以为是快照文件是截图

Vue精简版风格概述

前面的话 Vue官网的风格指南按照优先级(依次为必要.强烈推荐.推荐.谨慎使用)分类,且代码间隔较大,不易查询.本文按照类型分类,并对部分示例或解释进行缩减,是Vue风格指南的精简版 组件名称 [组件名为多个单词](必要) 组件名应该始终是多个单词的,根组件 App 除外. 这样做可以避免跟现有的以及未来的 HTML 元素相冲突,因为所有的 HTML 元素名称都是单个单词的 //bad Vue.component('todo', {})//good Vue.component('todo-ite

Vue SSR 即时编译技术的实现

当我们在服务端渲染 Vue 应用时,无论服务器执行多少次渲染,大部分 VNode 渲染出的字符串是不变的,它们有一些来自于模板的静态 html,另一些则来自模板动态渲染的节点(虽然在客户端动态节点有可能会变化,但是在服务端它们是不变的).将这两种类型的节点提取出来,仅在服务端渲染真正动态的节点(serverPrefetch 预取数据相关联的节点),可以显著的提升服务端的渲染性能. 提取模板中静态的 html 只需在编译期对模板结构做解析,而判断动态节点在服务端渲染阶段是否为静态,需在运行时对 V

12 种使用Vue 的最佳做法

作者:Matt Maribojoc 译者:前端小智 来源:medium 随着 VueJS 的使用越来越广泛,出现了几种最佳实践并逐渐成为标准.在本文中,主要分享在平时开发中一些有用资源和技巧,废话少说,我们开始吧. 1.始终在 v-for 中使用 :key 在需要操纵数据时,将key属性与v-for指令一起使用可以让程序保持恒定且可预测. 这是很有必要的,这样Vue就可以跟踪组件状态,并对不同的元素有一个常量引用.在使用动画或Vue转换时,key 非常有用. 如果没有key ,Vue只会尝试使D