首页 > 其他分享 >Vue3学习（一）

Vue3学习（一）

时间：2024-06-30 22:27:44浏览次数：3  
标签：count Vue value 学习 响应 getter Vue3 ref

创建组件实例：我们传入 createApp 的对象实际上是一个组件

import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'

const app = createApp(App)

大多数真实的应用都是由一棵嵌套的、可重用的组件树组成的。

App (root component)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

挂载应用 

app.mount('#app')

插值语法

  • 原始HTML：双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令。在当前组件实例上，将此元素的 innerHTML 与 rawHtml 属性保持同步。
<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

在网站上动态渲染任意 HTML 是非常危险的，因为这非常容易造成 XSS 漏洞。请仅在内容安全可信时再使用 v-html，并且永远不要使用用户提供的 HTML 内容。

  • Javascript表达式
{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>
  • 受限的全局访问

模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 Math 和 Date。没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。然而，你也可以自行在 app.config .globalProperties 上显式地添加它们，供所有的 Vue 表达式使用。

  • 指令

指令动态参数:<a @[eventName]="doSomething"> ... </a>

  1. 动态参数中表达式的值应当是一个字符串，或者是 null。特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告。
  2. 动态参数表达式因为某些字符的缘故有一些语法限制，比如空格和引号，在 HTML attribute 名称中都是不合法的。例如下面的示例：<a :['foo' + bar]="value"> ... </a>

如果你需要传入一个复杂的动态参数，我们推荐使用计算属性替换复杂的表达式

Vue3响应式

 ref()

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      // 在 JavaScript 中需要 .value
      count.value++
    }

    // 不要忘记同时暴露 increment 函数
    return {
      count,
      increment
    }
  }
}

--------------------------------------------------
//单文本组件中
<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>

在模板中使用 ref 时，我们不需要附加 .value。为了方便起见，当在模板中使用时，ref 会自动解包 (有一些注意事项)

reactive()

import { reactive } from 'vue'

const state = reactive({ count: 0 })

响应式对象是 JavaScript 代理，其行为就和普通对象一样。不同的是，Vue 能够拦截对响应式对象所有属性的访问和修改，以便进行依赖追踪和触发更新。

reactive() 将深层地转换对象：当访问嵌套对象时，它们也会被 reactive() 包装。当 ref 的值是一个对象时，ref() 也会在内部调用它。与浅层 ref 类似，这里也有一个 shallowReactive() API 可以选择退出深层响应性。

为什么我们需要使用带有 .value 的 ref，而不是普通的变量？

当你在模板中使用了一个 ref，然后改变了这个 ref 的值时，Vue 会自动检测到这个变化，并且相应地更新 DOM。这是通过一个基于依赖追踪的响应式系统实现的。当一个组件首次渲染时，Vue 会追踪在渲染过程中使用的每一个 ref。然后，当一个 ref 被修改时，它会触发追踪它的组件的一次重新渲染。

  • 在标准的 JavaScript 中，检测普通变量的访问或修改是行不通的。然而，我们可以通过 getter 和 setter 方法来拦截对象属性的 get 和 set 操作。

该 .value 属性给予了 Vue 一个机会来检测 ref 何时被访问或修改。在其内部，Vue 在它的 getter 中执行追踪，在它的 setter 中执行触发。

// 伪代码，不是真正的实现
const myRef = {
  _value: 0,
  get value() {
    track()
    return this._value
  },
  set value(newValue) {
    this._value = newValue
    trigger()
  }
}
  • 另一个 ref 的好处是，与普通变量不同，你可以将 ref 传递给函数，同时保留对最新值和响应式连接的访问。当将复杂的逻辑重构为可重用的代码时，这将非常有用。

Javascript时间循环应用—nextTick()详解_javascript 怎么使用nexttick-CSDN博客

Reactive Proxy vs. Original

const raw = {}
const proxy = reactive(raw)

// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false
  • 只有代理对象是响应式的，更改原始对象不会触发更新。因此，使用 Vue 的响应式系统的最佳实践是仅使用你声明对象的代理版本。
  • 为保证访问代理的一致性，对同一个原始对象调用 reactive() 会总是返回同样的代理对象，而对一个已存在的代理对象调用 reactive() 会返回其本身：

reactive() API 有一些局限性：

  • 有限的值类型：它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。
  • 不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失：
let state = reactive({ count: 0 })

// 上面的 ({ count: 0 }) 引用将不再被追踪
// (响应性连接已丢失！)
state = reactive({ count: 1 })
  • 对解构操作不友好：当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，我们将丢失响应性连接：
const state = reactive({ count: 0 })

// 当解构时，count 已经与 state.count 断开连接
let { count } = state
// 不会影响原始的 state
count++

// 该函数接收到的是一个普通的数字
// 并且无法追踪 state.count 的变化
// 我们必须传入整个对象以保持响应性
callSomeFunction(state.count)

计算属性：推荐使用计算属性来描述依赖响应式状态的复杂逻辑

computed() 方法期望接收一个 getter 函数，返回值为一个计算属性 ref，和其他一般的 ref 类似。

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

计算属性VS函数

  • 不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 author.books 不改变，无论多少次访问 publishedBooksMessage 都会立即返回先前的计算结果，而不用重复执行 getter 函数

  • 为什么需要缓存呢？想象一下我们有一个非常耗性能的计算属性 list，需要循环一个巨大的数组并做许多计算逻辑，并且可能也有其他计算属性依赖于 list。没有缓存的话，我们会重复执行非常多次 list 的 getter，然而这实际上没有必要！如果你确定不需要缓存，那么也可以使用方法调用。

  • 避免直接修改计算属性值

  • 计算属性的 getter 应只做计算而没有任何其他的副作用，这一点非常重要，请务必牢记。举例来说，不要改变其他状态、在 getter 中做异步请求或者更改 DOM！一个计算属性的声明中描述的是如何根据其他值派生一个值。因此 getter 的职责应该仅为计算和返回该值。在之后的指引中我们会讨论如何使用侦听器根据其他响应式状态的变更来创建副作用。

⭐⭐⭐

  1. 不要改变其他状态：

    • 在getter（或类似的访问器函数）中，你应该只返回与当前getter相关的状态或计算值。你不应该更改任何状态或触发任何副作用（如网络请求或DOM更新）。
    • 这是因为getter通常被设计为无副作用的、可重用的函数，它们应该只返回数据而不改变它。

  2. 在 getter 中做异步请求：

    • 异步请求（如网络请求）通常具有延迟，并可能产生副作用，如数据变更或错误。
    • getter应该是同步的，这意味着它们应该立即返回结果。如果你尝试在getter中进行异步操作，它可能会导致不可预测的行为或错误。
    • 如果你需要根据异步数据返回一些值，你应该在actions（在Vuex中）或effects/thunks（在Redux Toolkit中）中进行这些异步操作，并在操作完成后更新状态。

  3. 更改 DOM：

    • DOM（文档对象模型）是HTML页面的编程接口。更改DOM意味着直接操作页面上的元素。
    • getter不应该直接更改DOM。这是因为getter的主要目的是返回数据，而不是更改页面的表示。DOM的更改应该在组件的渲染函数、生命周期方法或事件处理程序中完成。

⭐⭐⭐

Vue中CSS动态样式绑定-CSDN博客

绑定HTML class

绑定内联样式

v-for遍历对象：value-key-index

<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

数组变化侦测​

变更方法​

Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

 javascript修改/不修改 原数组的函数-CSDN博客

//...numbers 的意思是“取出 numbers 数组中的所有元素”。但在这个上下文中，它被用在一个数组字面量中，
//所以实际上是创建了一个包含 numbers 所有元素的"新数组"
"let numbers = [1, 2, 3, 4, 5];  
let reversedNumbers = [...numbers].reverse();  
console.log(reversedNumbers); // 输出: [5, 4, 3, 2, 1]

 事件处理

事件处理器 (handler) 的值可以是：

  1. 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

  2. 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

  3. foo、foo.bar 和 foo['bar'] 会被视为方法事件处理器，而 foo() 和 count++ 会被视为内联事件处理器

有时我们需要在内联事件处理器中访问原生 DOM 事件。你可以向该处理器方法传入一个特殊的 $event 变量，或者使用内联箭头函数：

表单

另外，v-model 还可以用于各种不同类型的输入，<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

  • 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
  • <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
  • <select> 会绑定 value property 并侦听 change 事件。

<input
  :value="text"
  @input="event => text = event.target.value">
-------------------------------------------------
<input v-model="text">

在 Vue 中，.lazy 修饰符通常与表单输入元素（如 v-model 指令）一起使用，用于实现“懒加载”或“延迟”的双向数据绑定。这里的“懒加载”并不是指资源加载的延迟，而是指用户输入值的更新不会在每次输入时都立即触发，而是在某个“懒”的时机（通常是失去焦点或按下回车键后）才触发。

vue中【事件修饰符号】详解-CSDN博客

Vue生命周期Vue生命周期-Vue实例-CSDNVue入门技能树

    每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM

模板引用：

你只可以在组件挂载后才能访问模板引用。如果你想在模板中的表达式上访问 input，在初次渲染时会是 null。这是因为在初次渲染前这个元素还不存在呢！

<script setup>
import { ref, onMounted } from 'vue'

// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="input" />
</template>

 如果你需要侦听一个模板引用 ref 的变化，确保考虑到其值为 null 的情况：

watchEffect(() => {
  if (input.value) {
    input.value.focus()
  } else {
    // 此时还未挂载，或此元素已经被卸载（例如通过 v-if 控制）
  }
})

在 Vue 3 中，watchEffect 是一个新的 API，用于响应式地执行一个副作用函数（effect function），当这个副作用函数所依赖的响应式数据发生变化时，它会被重新触发。与 watch API 不同，watchEffect 不需要明确指定要观察哪个响应式引用或计算属性，而是会自动收集其执行过程中依赖到的响应式数据。

标签：count,Vue,value,学习,响应,getter,Vue3,ref
From： https://blog.csdn.net/m0_55049655/article/details/140085437

相关文章

  • springboot学习-2
    springboot配置配置文件格式-res中appli.properties中设置-同目录下application.yml主要serve:port:80(注意空格)无提示则fileproj-struc选择项目点击绿色叶子追加配置文件-application.yaml优先级properties>yml>ymal同上一个yaml-大小写-只能空格不能tab-属性前......
  • 【深度学习】图形模型基础(3)：从零开始认识机器学习模型
    1.引言机器学习，这一古老而又充满活力的领域，其历史可追溯至上世纪中叶。然而，直到20世纪90年代初，机器学习才开始展现出其广泛的应用潜力。在过去的十年里，机器学习更是迎来了前所未有的蓬勃发展，其应用范畴广泛，不仅在网络搜索、自动驾驶汽车、医学成像和语音识别等领域大放异彩......
  • 【深度学习】图形模型基础(1):使用潜在变量模型进行数据分析的box循环
    1.绪论探索数据背后的隐藏规律，这不仅是数据分析的艺术，更是概率模型展现其威力的舞台。在这一过程中，潜在变量模型尤为关键，它成为了数据驱动问题解决的核心引擎。潜在变量模型的基本理念在于，那些看似复杂、杂乱无章的数据表象之下，往往隐藏着一种更为简洁、有序的结构和规律，只......
  • Perl语言入门学习：从基础到实践
    Perl，全称为“PracticalExtractionandReportingLanguage”，是一种高效、灵活的编程语言，尤其擅长于文本处理、系统管理和报告生成。其丰富的库支持和正则表达式能力，让Perl成为数据挖掘、日志分析和自动化脚本编写的理想选择。本文旨在引导初学者迈出Perl编程的第一步，通过实际......
  • Linux操作系统学习：day08
    内容来自：Linux介绍视频推荐：Linux基础入门教程-linux命令-vim-gcc/g++-动态库/静态库-makefile-gdb调试目录day0853、命令和编辑模式之间的切换54、命令模式到末行模式的切换与末行模式下的保存退出命令模式到末行模式的切换保存退出55、末行模式下的替换操作56、末......
  • springboot学习-1
    创建project（联网）ideaspringinitialler（jdk1.8）mavenjavajarjava8依赖springweb2.5.0OK入门案例依次点击保留pom和src文件controller（开发完成）运行Application类(tomcat在boot框架中)简单的原因在于pom中的parent和springframework.boot快速启动（依赖于pom中的插件......
  • 第三次学习总结
    Java，作为一门广泛应用的编程语言，已经深深地影响了软件开发领域。随着互联网技术的飞速发展，Java在服务器端、移动端、嵌入式系统等领域都发挥着重要的作用。本文将从Java的基本概念、特性、核心技术以及实际应用等方面进行总结，以期帮助初学者更好地掌握Java编程技能。Java是一种面......
  • 2024我们该学习大模型吗？
    一、引言在快速变化的科技行业中，人工智能（AI）大模型已成为研究和应用的热点。随着AI技术的不断进步，特别是在自然语言处理、计算机视觉和机器学习平台等领域，许多专业人士开始将目光投向AI大模型的开发和应用。二、AI大模型兴起的原因AI大模型的兴起得益于几个关键因素。首......
  • 纯血版！“一杯冰美式的时间” 了解鸿蒙HarmonyOS Next应用开发者学习路径！
    前言最新数据显示，在中国智能手机市场，鸿蒙操作系统的份额达到10%，鸿蒙开发者数量更是超过240万，鸿蒙生态已经与iOS、安卓形成了“三分天下”的格局，成为当下的风口。如今，为了抢占巨大的鸿蒙市场，Top20移动互联网公司中有半数已经启动了鸿蒙原生应用开发，其中包括支付宝、美团等各......
  • 2，linux服务器使用学习
    目录服务器使用-SSH介绍使用OpenSSH-LinuxFinalShell-Windows阿里云服务器使用示例领取免费账号进行登录服务器使用-SSH介绍SecureShell(SSH)是由IETF(TheInternetEngineeringTaskForce)制定的建立在应用层基础上的安全网络协议。它是专为远程登录会话(甚至......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99