vue3-基础知识（1）- 基础扫盲

模板语法

1. 绑定多个值

   <div v-bind="objectOfAttrs"></div>
   

2. 受限全局访问

• 模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。
• 绑定在window下的属性，由于沙盒化，需要再次定义可访问性。
• 设置：app.config.globalProperties = obj

3. 动态参数的限制

• 不能为null
• 不能使用表达式。eg：:['a' + a]，使用计算属性代替

计算属性

1. 作用：描述如何根据其他值派生一个值
2. computed() 方法期望接收一个 getter 函数，返回值为一个计算属性 ref。模板中自动解包。
3. 可写计算属性
4. 不要在 getter 中做异步请求或者更改 DOM，使用侦听器

样式

class

1. 绑定对象

• 基本使用ref: :class="{ active: isActive, 'text-danger': hasError }",
• reactive: <div :class="reactiveClassObject"></div>,
• computed: <div :class="computedClassObject"></div>

2. 绑定数组

• 基本使用ref：<div :class="[activeClass, errorClass]"></div>
• 嵌套对象：<div :class="[{ active: isActive }, errorClass]"></div>

3. 组件上使用

• 对于只有一个根元素的组件，当你使用了 class attribute 时，这些 class 会被添加到根元素上，并与该元素上已有的 class 合并
• 指定元素：$attrs.class

style

同上1、2

条件渲染

（略）

列表渲染

在计算属性中使用 reverse() 和 sort() 的时候务必小心！这两个方法将变更原始数组，计算函数中不应该这么做。
请在调用这些方法之前创建一个原数组的副本：

- return numbers.reverse()
+ return [...numbers].reverse()

事件处理

1. 访问事件参数：$event 或者 () => {}

表单绑定

1. 语言限定
   对于需要使用 IME 的语言 (中文，日文和韩文等)，你会发现 v-model 不会在 IME 输入还在拼字阶段时触发更新。如果你的确想在拼字阶段也触发更新，请直接使用自己的 input 事件监听器和 value 绑定而不要使用 v-model。
2. 如果 v-model 表达式的初始值不匹配任何一个选择项，<select> 元素会渲染成一个“未选择”的状态。在 iOS 上，这将导致用户无法选择第一项，因为 iOS 在这种情况下不会触发一个 change 事件。因此，我们建议提供一个空值的禁用选项。
3. 值绑定

   <input
   type="checkbox"
   v-model="toggle"
   true-value="yes"
   false-value="no" />
   

   动态值

   <input
   type="checkbox"
   v-model="toggle"
   :true-value="dynamicTrueValue"
   :false-value="dynamicFalseValue" />
   

4. 修饰符

• .lazy

  默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据

• .number

  • 如果该值无法被 parseFloat() 处理，那么将返回原始值
  • number 修饰符会在输入框有 type=“number” 时自动启用

生命周期

1. 钩子应当在组件初始化时被同步注册
2. 生命周期图

    setup 
    -> beforeCreate 
    -> init Options API 
    -> created 
    -> 是否预编译模板
    n-> 编译模板
    y->
    -> beforeMounted 
    -> 初始化渲染，插入DOM节点
    -> mounted
    -> Mounted
    when data change ->
    -> beforeUpdate
    -> 重新渲染重绘页面
    -> updated 
    when component is unmounted ->
    -> beforeUnmount
    -> Unmounted
    -> unmounted

模板引用

1. ref:直接访问底层 DOM 元素

   <script setup>
   import { ref, onMounted } from 'vue'
   
   // 声明一个 ref 来存放该元素的引用
   // 必须和模板里的 ref 同名
   const input = ref(null)
   
   onMounted(() => {
     input.value.focus()
   })
   </script>
   
   <template>
     <input ref="input" />
   </template>
   

2. 只可以在组件挂载后才能访问模板引用
3. 如果你需要侦听一个模板引用 ref 的变化，确保考虑到其值为 null 的情况，加判断
4. 函数模板引用#

• 除了使用字符串值作名字，ref attribute 还可以绑定为一个函数，会在每次组件更新时都被调用。该函数会收到元素引用作为其第一个参数：

  <input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }">
  

• 注意我们这里需要使用动态的 :ref 绑定才能够传入一个函数。
• 当绑定的元素被卸载时，函数也会被调用一次，此时的 el 参数会是 null。

5. 组件引用

• 优先使用props和emit来交互
• 组件私有
  • 使用了<script setup>的组件是默认私有的
  • defineExpose 暴露，提供访问

css功能

1. 深度选择器：:deep()
2. 插槽选择器：:slotted(div)
3. 全局选择器：:global(.red)
4. 默认模块名：$style，作为js变量直接访问class的值。
5. 自定义css模块变量名

     <style module="classes">
     </style>
   

   使用：$classes
6. 组合api

  import { useCssModule } from 'vue'
  // 在 setup() 作用域中...
  // 默认情况下, 返回 <style module> 的 class
  useCssModule()
  // 具名情况下, 返回 <style module="classes"> 的 class
  useCssModule('classes')

7. 将js变量传给css: v-bind(color)

动画

1. 动画
   设置动画组件包裹元素

<transition name="fade">
  动画
</transition>

设置css

  /* transition组件搭配样式设置动画 */
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s linear;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }

2. 其他用法参照transition