YoosonChan
YoosonChan

【笔记】Vue3官方文档摘抄

原文地址：https://v3.cn.vuejs.org/guide/introduction.html

Vue3基础

模板语法

插值

  • 文本 => Mustache->{{ }}
  • 原始HTML => v-html=""
  • Attribute => v-bind
  • JavaScript表达式

指令（Directives） => v-attribute

  • 参数 => v-bind:参数，v-on:参数
  • 动态参数 => v-bind:[attributeName]=""
    • 不能含有空格，可使用计算属性解决
  • 修饰符 => .prevent <=> event.preventDefault()

缩写

v-bind: <=> :
v-on: <=> @

Data Property 和方法

Data Property

$data

方法

methods => 绑定this

在定义 methods 时应避免使用箭头函数，因为这会阻止 Vue 绑定恰当的 this 指向

防抖和节流

Vue 没有内置支持防抖和节流，但可以使用 Lodash 等库来实现。

计算属性和侦听器

计算属性 => computed

  • 计算属性缓存 vs 方法
    计算属性将基于它们的响应依赖关系缓存。计算属性只会在相关响应式依赖发生改变时重新求值。这就意味着只要 计算属性中的方法依赖的值 还没有发生改变，多次访问计算属性中的方法时计算属性会立即返回之前的计算结果，而不必再次执行函数。
    这也同样意味着下面的计算属性将永远不会更新，因为 Date.now () 不是响应式依赖。
    相比之下，每当触发重新渲染时，调用方法将始终会再次执行函数。

  • 计算属性的 Setter

    computed: {
  xxx: {
    // getter
    get() {},
    // setter
    set(newValue) {}
  }
}

侦听器 => watch

  • 计算属性 vs 侦听器
    Vue 提供了一种更通用的方式来观察和响应当前活动的实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，watch 很容易被滥用。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

Class 与 Style 绑定

绑定 HTML Class

  • 对象语法

    上面的语法表示 active 这个 class 存在与否将取决于 data property isActive 的 truthiness。

  • 数组语法

    

    data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

  • 在组件上使用

绑定内联样式

  • 对象语法
    CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。

  • 数组语法

    

    data() {
  return {
    styleObject: {
      color: 'red'
    }
  }
}

  • 自动添加前缀
    在 :style 中使用需要一个 vendor prefix (浏览器引擎前缀) 的 CSS property 时，Vue 将自动侦测并添加相应的前缀。Vue 是通过运行时检测来确定哪些样式的 property 是被当前浏览器支持的。如果浏览器不支持某个 property，Vue 会进行多次测试以找到支持它的前缀。

  • 多重值
    可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

    这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

条件渲染

v-if

  • v-if
  • v-else
  • v-else-if

v-show

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 display CSS property。
注意，v-show 不支持