VueKey

vue3核心语法

vue3核心语法

• hook

  • 简单来讲就是自定义的包/库（python等各种语言中都有）；是Vue 3中的重要特性，通过组合式API实现了对状态和副作用的管理，使得逻辑复用变得更加简单和高效。与传统的mixins相比，Hooks提供了更好的灵活性和可维护性，是现代Vue开发中不可或缺的一部分。主要用于封装可重用的逻辑和管理组件的状态、生命周期以及副作用。允许开发者以函数的形式组织和复用代码，从而提高代码的可维护性和可读性。

  • Vue Hook的作用

    • 状态逻辑复用：Vue Hook允许在多个组件之间共享状态逻辑，避免重复代码。例如，可以创建一个自定义Hook来处理表单输入状态，然后在多个表单组件中使用。

    • 生命周期管理：Hooks提供了一系列生命周期钩子函数，如onMounted、onUpdated、onUnmounted等，帮助开发者在组件不同阶段执行特定操作。例如，可以在组件挂载后发起数据请求，或在组件卸载前清理定时器。

    • 简化代码结构：通过将逻辑封装到Hooks中，可以使组件代码更简洁，逻辑更集中，便于理解和维护。这种方式比传统的mixins更清晰，因为Hooks是以函数形式存在，避免了命名冲突和逻辑散落的问题。

    • 响应式数据处理：使用Hooks时，可以利用Vue 3中的响应式API（如ref、reactive、computed）来创建响应式数据，使得状态管理更加直观和高效。

  • 自定义Hooks：是开发者根据需要创建的函数，通常以use开头，例如useFetchData。这些函数可以调用其他Hooks，并返回响应式数据或方法，以供组件使用。自定义Hooks的基本规范包括：

    • 函数名以use开头。

    • 在组件的setup函数中调用自定义Hook。

    • 返回响应式变量或方法，以便在组件中解构使用。

      例如，一个简单的自定义Hook可以用于处理本地存储：

      import { ref, watch } from 'vue';
      
      export default function useLocalStorage(key, initialValue) {
         const data = ref(initialValue);
      
         if (localStorage.getItem(key)) {
            data.value = JSON.parse(localStorage.getItem(key));
         } else {
            localStorage.setItem(key, JSON.stringify(initialValue));
         }
      
         watch(data, (newValue) => {
            localStorage.setItem(key, JSON.stringify(newValue));
         });
      
         return { data };
      }
      /*
         1. **数据持久化存储**:
         if (localStorage.getItem(key)) {
            data.value = JSON.parse(localStorage.getItem(key));
         } else {
            localStorage.setItem(key, JSON.stringify(initialValue));
         }
         
         - 当首次使用时，如果 localStorage 中不存在数据，则存入初始值
         - 如果已存在数据，则读取已保存的数据
      
         2. **响应式数据管理**:
         const data = ref(initialValue);
         - 使用 ref创建响应式数据，可以在组件中实时反映数据变化
      
         3. **自动同步到 localStorage**:
         watch(data, (newValue) => {
            localStorage.setItem(key, JSON.stringify(newValue));
         });
         - 通过 watch监听数据变化
         - 当数据发生变化时，自动更新到 localStorage 中
      
         使用示例(在src/view/try.vue中):
         const { data } = useLocalStorage('myData', { name: 'default' });
      
         这样就创建了一个在组件和 localStorage 之间自动同步的响应式数据。
          */

      在组件中使用时，可以这样引入并使用这个Hook：

      <script setup>
      import useLocalStorage from './useLocalStorage';
      
      const { data } = useLocalStorage('myData', { name: 'default' });
      </script>

• <RouterView />

  • <RouterView /> 是 Vue Router 的核心组件之一，它的主要作用是作为路由匹配到的组件的渲染出口。是实现前端路由的关键组件，它让我们能够根据 URL 的变化动态渲染不同的组件内容。

  • 主要作用

    1. 组件渲染容器

       • 它会根据当前的路由路径（URL）
       • 自动渲染与该路径匹配的组件
       • 相当于一个动态组件的占位符

    2. 动态更新

       • 当路由发生变化时<RouterView /> 会自动更新渲染的内容,无需手动干预

  • 使用场景:内容需要根据路由变化而变化

    • 看他的上一级路由的组件的相应变化位置就是它的出口；
      • 比如项目中整个/下的第一级路由的出口就在src\App.vue（在/xx下随着路由整个页面都变化）
      • 菜单嵌套路由的出口在src\view\Main.vue（Layout组件）中的el-main中；在/path/xx下切换路由只相应修改页面布局中的el-main中的内容

    1. 布局组件中

       • 作为内容区域的容器
       • 常见于后台管理系统的布局中

    2. 嵌套路由

       • 当需要实现多层级路由时,父路由组件相应位置放置 <RouterView />，子路由的组件会在这里渲染

    3. 路由过渡动画

       • 可以配合 <transition> 使用
       • 为路由切换添加动画效果

    <transition name="fade">
      <RouterView />
    </transition>

• 在 Vue 2、3 中，@ 是 v-on 指令的简写，用于监听 DOM 事件并执行相应的 JavaScript 代码。在 Vue 3 中，使用 : 符号来表示属性绑定是一个重要的语法特性。这种写法源于 Vue 的响应式特性，允许开发者将组件的属性（props）与数据模型进行绑定，从而实现动态更新。

  • 注意绑定的值必须满足如下规则

    //可行的情况
     变量：:value="message"//message必须是被定义过的变量
     表达式：:value="count + 1"//count必须是被定义过的变量
     字符串字面量：:value="'hello'"（三个引号）
     对象：:class="{ active: isActive }"
     数组：:class="[activeClass, errorClass]"
     布尔值：:disabled="false"
     //不可行
     :value='hello'
     :value="message"//但是message没有被定义
     :value="count + 1"//但是count没有被定义
     //举例说明:当我插入ep input组件时
     <el-input v-model="loginForm.vaildCode"  placeholder="验证码"  :prefix-icon='Search' >显示不了，因为v-bing绑定了Search但它没有被定义
     //其实我想要的search就是一个常量字符串，正确写法如下：去掉:或者使用三引号表示字符串常量
     <el-input v-model="loginForm.vaildCode"  placeholder="验证码"  prefix-icon='Search' >
     <el-input v-model="loginForm.vaildCode"  placeholder="验证码"  :prefix-icon="'Search'" >

  • 属性绑定语法

    • 基本用法

      • 属性绑定：使用 : 符号（相当于 v-bind 的简写）来将数据绑定到组件的属性上。例如：

      <my-component :some-prop="dataValue"></my-component>
      <my-component   :style="{width:'230px'}"> </my-component>

      在这个例子中，some-prop 是子组件的一个 prop，而 dataValue 是父组件中的一个数据属性。

      • 动态绑定

      • 动态属性：可以使用表达式动态计算属性值。例如：

      <input :value="inputValue" :disabled="isDisabled" />

      这里，value 和 disabled 属性会根据 inputValue 和 isDisabled 的值动态更新。

      • 使用对象语法

      • 对象语法：可以将多个属性一起绑定到组件上。例如：

      <my-component v-bind="{ propA: valueA, propB: valueB }"></my-component>

      使用这种方式，可以在一个对象中传递多个属性。

  • 事件处理语法

    基本用法

    • 监听事件：使用 v-on 指令（简写为 @）来监听事件。例如：

      <button @click="handleClick">Click me</button>

      上述代码中的 handleClick 是一个在组件中定义的方法，当按钮被点击时，该方法将被调用。

    • 内联事件处理器：可以直接在模板中编写 JavaScript 代码，例如：

      <button @click="alert('Button clicked!')">Click me</button>

      在这个例子中，点击按钮会弹出一个警告框。

    事件参数

    • 访问原生事件：在事件处理方法中，可以访问原生 DOM 事件对象。该对象会自动作为参数传递给方法。例如：

      methods: {
      handleClick(event) {
         console.log(event.target); // 输出触发事件的元素
      }
      }

    • **使用 $event**：在内联处理器中，可以通过特殊变量 $event 来访问原生事件。例如：

      <button @click="handleClick($event)">Click me</button>

    修饰符

    Vue 提供了一些修饰符来控制事件的行为，例如：

    • **.stop**：阻止事件冒泡。

      <button @click.stop="doSomething">Click me</button>

    • **.prevent**：阻止默认行为。

      <form @submit.prevent="submitForm">Submit</form>

    • **.self**：仅当事件目标是元素本身时才触发处理器。

      <div @click.self="doThat">Click me only if clicked on this div</div>

    • 自定义事件

    Vue 的组件之间可以通过自定义事件进行通信。子组件可以使用 $emit 方法向父组件发送事件。例如：

    // 子组件
    this.$emit('custom-event', payload);

    父组件则可以通过 @custom-event 来监听这个自定义事件：

    <ChildComponent @custom-event="parentMethod" />

  • 变量： Vue3 中变量的使用场景

    1. 使用 {{ }} 插值语法
    • 在模板中显示变量值

      <template>
      <!-- 显示数据 -->
      <div>{{ username }}</div>
      <p>{{ count + 1 }}</p>
      <span>{{ isActive ? '激活' : '未激活' }}</span>
      </template>

    2. 使用单引号 ''
    • 字符串字面量
    • 静态值
    • 变量作各种参数，比如store.commit/dispatch等等

      increment: () => store.commit('increment'),//提交一个名为increment的变化

    3. 使用 : 或 v-bind
    • 动态绑定属性

      <template>
      <!-- 动态绑定 -->
      <div :class="{'click-enabled': !flag}">//代表flag为false时，class为click-enabled，否则没有class
      <img :src="imgUrl">
      <el-button :type="buttonType">
      <div :style="{ width: width + 'px' }">
      </template>

    4. 使用 @ 或 v-on
    • 事件绑定

      <template>
      <!-- 事件绑定 -->
      <button @click="handleClick">
      <input @input="handleInput">
      </template>

    5. 使用 v-model
    • 双向数据绑定

      <template>
      <!-- 双向绑定 -->
      <input v-model="message">
      <el-input v-model="username">
      </template>

    6. 使用 v-if/v-show

    • 条件渲染

      <template>
      <!-- 条件渲染 -->
         <div v-if="isShow">
            这个元素会根据 isShow 的值来添加或删除
         </div>
      
         <div v-show="isVisible">
            这个元素会根据 isVisible 的值来显示或隐藏
         </div>
      </template>

    • 总结：

      • {{ }}: 显示变量值
      • '': 静态值
      • :: 动态属性绑定
      • @: 事件绑定
      • v-model: 双向绑定
      • v-if/v-show: 条件渲染

nextTick&object.assign

nextTick

nextTick 是 Vue.js 提供的一个方法，用于在下一次 DOM 更新循环结束之后执行延迟回调。在修改数据后立即使用 nextTick，可以在回调中获取更新后的 DOM。

用法示例：

import { nextTick } from 'vue';

setup() {
  const count = ref(0);

  const increment = () => {
    count.value++;
    nextTick(() => {
      // 在这里可以访问更新后的 DOM
      console.log('DOM 已更新');
    });
  };

  return { count, increment };
}

说明：

• 当你在修改响应式数据后，需要在 DOM 更新完成后执行某些操作时，使用 nextTick。
• 常见场景包括获取更新后的 DOM 元素的尺寸或状态。

---

Object.assign

Object.assign 是 JavaScript 中的一个静态方法，用于将一个或多个源对象的可枚举属性复制到目标对象中。返回目标对象。也称为合并对象。

语法：

1. 如果target存在source中的属性就会被重写赋值，如果不存在就会创造这个属性然后赋值过去；

Object.assign(target, ...sources);

• target：目标对象。
• sources：源对象。

用法示例：

const target = { a: 1, b: 1, c: 1 };//或者{a:1},输出结果一样
const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);

console.log(target); // 输出：{ a: 1, b: 2, c: 3 }

说明：

• Object.assign 常用于对象的合并或浅拷贝。

• 如果目标对象与源对象有相同的属性，后面的属性会覆盖前面的属性。

• 参考

  • 【2024最新版】3小时学会Vue3，小白零基础视频教程，web前端快速入门实战课程_哔哩哔哩_bilibili
  • 30分钟学会Vue之核心语法 趁着暑假掌握一门技能 大学生前端实习毕业设计必备技能_哔哩哔哩_bilibili
  • 十分钟，带你了解 Vue3 的新写法最近因为项目需要，不得不学习一下 Vue3。于是花了 4 个小时，把 Vue3 过了 - 掘金
  • 超极速的Vue3上手指北笔者之前是Vue2+React开发者，因项目需要直接上手Vue3，所以快速学习一下，中间会对比一 - 掘金