外贸营销网站怎么建设,阿里云网站 模板建设,南安市城乡住房建设局网站,重庆品牌型网站建设文章目录 一、Vue 3 组合式 API 概述二、setup 函数的基本使用2.1 setup 函数的特点2.2 setup 函数的基本结构2.3 实现一个简单的小demo 三、ref 函数的功能和应用3.1 ref函数介绍3.2 基本使用3.2.1 定义ref数据3.2.2 修改响应式变量 3.3 使用ref函数实现计数器 … 文章目录 一、Vue 3 组合式 API 概述二、setup 函数的基本使用2.1 setup 函数的特点2.2 setup 函数的基本结构2.3 实现一个简单的小demo 三、ref 函数的功能和应用3.1 ref函数介绍3.2 基本使用3.2.1 定义ref数据3.2.2 修改响应式变量 3.3 使用ref函数实现计数器 四、reactive 函数的功能和应用4.1 reactive 函数介绍4.2 基本使用4.3 使用reactive函数实现计数器4.4 reactive函数的的局限性 五、ref 与 reactive 的区别5.1 主要区别5.2 ref 适合的场景5.3 reactive 适合的场景5.4 Vue社区观点 六、总结 一、Vue 3 组合式 API 概述 在 Vue 3 中引入了组合式 APIComposition API 这使得开发者可以更灵活地组织代码逻辑并提升了组件的复用性和可维护性。相比于 Vue 2 中的选项式 API组合式 API 提供了一种更具功能性的方式来构建应用。
主要优点
逻辑复用和组织通过组合函数可以更清晰地组织代码逻辑避免在生命周期函数中写大量逻辑。更好的 TypeScript 支持组合式 API 天然地支持 TypeScript这使得类型推断和类型检查变得更加轻松。性能优化组合式 API 的实现方式在某些场景下可以带来性能上的提升。
二、setup 函数的基本使用
setup 函数是 Vue 3 组件中使用组合式 API 的起点它是一个新增加的组件选项所有的组合式 API 的逻辑都需要在这个函数中书写。
2.1 setup 函数的特点
从组件生命周期来看在beforeCreate之前调用因此它没有 this 绑定。函数中 this 不是组件实例是 undefined。返回一个对象该对象将被合并到组件的 data 中可以在模板中直接使用。
2.2 setup 函数的基本结构
templatediv!-- 绑定在模板中的变量和方法 --/div
/templatescript
import { ref, reactive } from vue;export default {setup() {// 在这里定义响应式变量和方法return {// 返回需要在模板中使用的变量和方法};},
};
/scriptstyle scoped
/* 样式部分 */
/style2.3 实现一个简单的小demo
templatedivp clickshow(){{ msg }}/p/div
/templatescriptexport default {setup() {console.log(setup 函数执行了);let msg Hello World;function show(){console.log(show 函数执行了);}// 返回定义的变量和函数return {msg,show};},beforeCreate() {console.log(beforeCreate 函数执行了);},
};
/scriptstyle scoped
button {margin: 5px;padding: 10px 20px;background-color: #4caf50;color: white;border: none;border-radius: 5px;cursor: pointer;
}button:hover {background-color: #45a049;
}p {font-size: 18px;
}
/style
三、ref 函数的功能和应用
3.1 ref函数介绍
ref 函数用于创建一个持有单个值的响应式引用。它适用于基本数据类型如字符串、数字、布尔值和不需要深度响应的数据结构。通过 ref 函数我们可以在 Vue 组件中创建简单的响应式数据。
主要特点
基本类型响应性为基本数据类型创建响应式状态。引用式访问通过 .value 属性访问和修改值。适用于 DOM 引用可以用于 DOM 元素的引用。
3.2 基本使用
3.2.1 定义ref数据
import { ref } from vue;export default {setup() {// 创建响应式数据const count ref(0); const message ref(Hello, Vue 3!);const isVisible ref(true);return {count,message,isVisible,};},
};3.2.2 修改响应式变量
要修改 ref 创建的响应式变量需要使用 .value 属性
count.value; // 增加 count
count.value 10; // 设置 count 的值注意当在Vue的模板template中使用时ref 的值可以直接使用无需显式调用 .value templatedivp{{ count }}/pbutton clickcount增加/button/div
/template3.3 使用ref函数实现计数器
应用需求
显示当前计数。提供按钮增加计数。提供按钮重置计数。
templatedivp当前计数{{ count }}/pbutton clickincrement增加/buttonbutton clickreset重置/button/div
/templatescript
import { ref } from vue;export default {setup() {console.log(setup 函数执行了);// 创建一个响应式对象const count ref(0);// 增加计数function increment() {count.value;console.log(count count.value);}// 重置计数function reset() {count.value 0;}return {count,increment,reset,};},beforeCreate() {console.log(beforeCreate 函数执行了);},
};
/scriptstyle scoped
button {margin: 5px;padding: 10px 20px;background-color: #4caf50;color: white;border: none;border-radius: 5px;cursor: pointer;
}button:hover {background-color: #45a049;
}p {font-size: 18px;
}
/style代码解读 创建响应式变量 使用 ref 创建一个响应式变量 count实现记录数字。ref(0) 表示将初始值设置为 0。 定义方法 increment 方法用于增加计数值。在函数内部通过 count.value 来递增计数器并在控制台中输出新的计数值。reset 方法用于重置计数值。将 count.value 设为 0 来重置计数器。 组件返回 return返回 count 和方法 increment、reset使其在模板中可以直接访问这一步非常重要 模板绑定 {{ count }}在模板中使用双花括号语法绑定 count动态显示当前计数值。click 绑定 button 元素的点击事件到 increment 和 reset 函数上实现按钮点击后对计数值的增加和重置。 生命周期钩子 beforeCreate输出消息以便于理解setup函数的执行顺序。
四、reactive 函数的功能和应用
4.1 reactive 函数介绍
reactive 是 Vue 3 提供的一个 API用于创建深度响应式对象。与 ref 不同ref 适用于基本数据类型而 reactive 更适用于对象、数组等复杂数据结构。
主要特点
创建深度响应式的数据对象。自动跟踪依赖变化并更新视图。可以结合 toRefs 解构成多个响应式引用。
4.2 基本使用
import { reactive } from vue;export default {setup() {// 创建响应式对象const state reactive({count: 0,message: Hello, Vue 3!,});// 方法示例function increment() {state.count;}return {state,increment,};},
};在上面的代码中我们使用 reactive 创建了一个响应式对象 state其中包含了两个属性count 和 message。increment 函数可以用来增加 count 的值。
4.3 使用reactive函数实现计数器
应用需求
显示当前计数。提供按钮增加计数。提供按钮重置计数。
templatedivh1{{ state.title }}/h1p当前计数{{ state.count }}/pbutton clickincrement增加/buttonbutton clickreset重置/button/div
/templatescript
import { reactive } from vue;export default {setup() {// 创建一个响应式对象const state reactive({count: 0,title: 计数器应用,});// 增加计数function increment() {state.count;}// 重置计数function reset() {state.count 0;}// 暴露定义的数据和函数return {state,increment,reset,};},
};
/scriptstyle scoped
button {margin: 5px;padding: 10px 20px;background-color: #4caf50;color: white;border: none;border-radius: 5px;cursor: pointer;
}button:hover {background-color: #45a049;
}h1 {color: #333;
}p {font-size: 18px;
}
/style代码解读 跟前面的其实差不多只不过用法上有一点区别其他其实差别并不大。 创建响应式变量使用 ref 创建两个响应式变量 count 和 title。定义方法定义 increment 和 decrement 函数用于增加和减少计数。模板绑定在模板中使用 {{ }} 绑定响应式变量并通过 click 指令绑定事件处理函数。
4.4 reactive函数的的局限性 参考自https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive reactive() API 有一些局限性 有限的值类型它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。 不能替换整个对象由于 Vue 的响应式跟踪是通过属性访问实现的因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象因为这样的话与第一个引用的响应性连接将丢失 js let state reactive({ count: 0 })// 上面的 ({ count: 0 }) 引用将不再被追踪
// (响应性连接已丢失)
state reactive({ count: 1 })对解构操作不友好当我们将响应式对象的原始类型属性解构为本地变量时或者将该属性传递给函数时我们将丢失响应性连接 js const state reactive({ count: 0 })// 当解构时count 已经与 state.count 断开连接
let { count } state
// 不会影响原始的 state
count// 该函数接收到的是一个普通的数字
// 并且无法追踪 state.count 的变化
// 我们必须传入整个对象以保持响应性
callSomeFunction(state.count)由于这些限制我们建议使用 ref() 作为声明响应式状态的主要 API。
五、ref 与 reactive 的区别
Vue 3 提供了两种创建响应式数据的方式ref 和 reactive。它们在功能上有一些不同适用于不同的场景。
5.1 主要区别
特性refreactive用途创建持有基本类型值的响应式引用创建深度响应式对象适合复杂数据结构访问方式通过.value访问和修改直接访问和修改对象的属性响应性基本类型响应性深度响应性自动追踪对象属性的变化适用场景适用于简单的状态和需要 DOM 引用的场景适用于多属性对象、数组、复杂数据结构数据类型支持只对 object 类型有效对任意类型有效使用方式在 script 和 template 中无差别使用在 script 和 template 使用方式不同
5.2 ref 适合的场景
用于基本类型或需要独立响应式的变量。适合处理简单的数据类型如 Number、String、Boolean。独立的响应式变量需要单独处理或跟踪的变量。DOM 元素引用通过 ref 获取和操作 DOM 元素。
5.3 reactive 适合的场景
用于复杂的数据结构如对象或数组。适合处理多属性的对象或需要整个结构响应式的数据。深度响应需要自动跟踪嵌套属性变化的数据。
5.4 Vue社区观点
默认都使用 ref 当需要分组时使用 reactive 。
详细原因可以看Ref vs. Reactive — Which is Best? | Michael Thiessen
六、总结
本文主要讲述了 Vue 3 中的 setup 函数、ref函数和 reactive 函数的一些基本知识他们的基本使用语法和如何简单运用实现一个小demo希望对大家有所帮助☺️。
参考文章
Ref vs. Reactive — Which is Best? | Michael Thiessen
【译】Ref vs. Reactive使用Vue3组合式API该如何选择
响应式基础 | Vue.js
