郑州网站优化,物联网官网入口,做视频网站需要什么空间,做公司简介需要多少钱watch侦听器 Vue.js 中的侦听器#xff08;Watcher#xff09;是 Vue提供的一种响应式系统的核心机制之一。 监听数据的变化#xff0c;并在数据发生变化时执行相应的回调函数。 目的:数据变化能够自动更新到视图中 原理#xff1a;
Vue 的侦听器通过观察对象的属性#…watch侦听器 Vue.js 中的侦听器Watcher是 Vue提供的一种响应式系统的核心机制之一。 监听数据的变化并在数据发生变化时执行相应的回调函数。 目的:数据变化能够自动更新到视图中 原理
Vue 的侦听器通过观察对象的属性并在属性值发生变化时触发回调函数来实现。在 Vue 内部侦听器通过使用 JavaScript 对象的 Object.defineProperty 方法来实现对数据的监听从而在数据发生变化时能够及时地通知相关的观察者Watcher进而更新视图。
功能
监听数据变化 侦听器能够监听数据的变化包括数据的添加、修改、删除等操作。执行回调函数 当数据发生变化时侦听器会执行事先注册的回调函数从而触发相应的操作。
用法
在 Vue 组件中你可以使用侦听器来监视数据的变化并执行相应的操作。你可以在 watch 选项中定义侦听器也可以直接使用 $watch 方法来创建侦听器。
通过 watch 选项
templatedivpCount: {{ count }}/pbutton clickincrementIncrement/button/div
/templatescript
export default {data() {return {count: 0};},watch: {count(newValue, oldValue) {console.log(Count changed from, oldValue, to, newValue);}},methods: {increment() {this.count;}}
};
/script通过 $watch 方法
templatedivpCount: {{ count }}/pbutton clickincrementIncrement/button/div
/templatescript
export default {data() {return {count: 0};},mounted() {this.$watch(count, (newValue, oldValue) {console.log(Count changed from, oldValue, to, newValue);});},methods: {increment() {this.count;}}
};
/script优缺点
优点
响应式更新 侦听器能够实现数据的响应式更新当数据发生变化时相关的视图会自动更新。灵活性 侦听器的使用非常灵活你可以在任何地方监听任何数据的变化并执行相应的操作。
缺点
性能消耗 对大量数据进行监听可能会导致性能下降因为每个被监听的数据都会创建一个侦听器消耗一定的内存和 CPU 资源。复杂性 当应用变得复杂时过多的侦听器可能会导致代码难以维护和理解。
以下是一个简化的流程图来展示 Vue.js 中侦听器的底层原理
---------------------
| 数据对象 |
| (Data Object) |
--------------------|v
--------------------
| Observer 监听器 |
| (Observer) |
--------------------|v
--------------------
| Watcher 侦听器 |
| (Watcher) |
--------------------|v
--------------------
| 更新视图 |
| (Update View) |
---------------------在这个流程图中有以下几个关键组件 数据对象Data Object 这是 Vue.js 中的数据对象可以是一个 Vue 实例的数据对象也可以是 Vue 组件中的数据对象。数据对象中的数据发生变化时需要通知到相关的侦听器。 Observer 监听器Observer Observer 监听器负责监听数据对象中数据的变化。它通过递归遍历数据对象中的所有属性并对每个属性使用 Object.defineProperty 方法添加 getter 和 setter从而实现对数据的监控。 Watcher 侦听器Watcher Watcher 侦听器是 Vue.js 中的侦听器组件负责订阅数据对象中的某个属性并在该属性的值发生变化时执行回调函数。每个 Watcher 侦听器都与一个表达式相关联当表达式的值发生变化时Watcher 侦听器会得到通知并执行相应的回调函数。 更新视图Update View 更新视图是指当数据对象的某个属性发生变化时需要更新对应的视图内容。这通常包括重新渲染组件或更新页面中的某个 DOM 元素。
具体流程如下 当数据对象中的某个属性发生变化时Observer 监听器会检测到变化并通知相关的 Watcher 侦听器。 Watcher 侦听器接收到变化通知后会执行事先注册的回调函数。这个回调函数可以是更新视图的操作也可以是其他需要在数据变化时执行的操作。 更新视图操作会根据具体情况执行比如重新渲染组件或更新页面中的某个 DOM 元素以反映数据变化后的最新状态。
数据变化能够自动更新到视图中
在 Vue 3 中watch 函数用于监听响应式数据的变化并在数据发生变化时执行回调函数。下面详细说明 watch 函数的原理、参数及其含义以及返回结果
原理
watch 函数的原理是通过创建一个响应式的 watcher观察者来监听数据的变化。当被监听的数据发生变化时watcher 将会执行注册的回调函数。
参数及其含义
watch 函数接受三个参数 要监听的数据可选 这是一个可以是响应式数据对象、ref 对象、reactive 对象或计算属性等。当该数据发生变化时触发监听器执行回调函数。 回调函数必需 这是当被监听的数据发生变化时需要执行的函数。回调函数接受两个参数新值newValue和旧值oldValue分别表示数据变化后的值和变化前的值。 选项对象可选 这是一个可选的选项对象用于配置监听器的行为。常见的选项包括 deep是否深度监听对象内部值的变化默认为 false。immediate是否在初始化时立即执行回调函数默认为 false。flush指定 watcher 的触发时机默认为 pre可选的值有 pre在 DOM 更新之前触发和 post在 DOM 更新之后触发。等等其他选项可以根据具体需求进行配置。
返回结果
watch 函数的返回结果是一个取消监听的函数可以通过调用该函数来停止对数据的监听。如果要停止监听多个数据可以将返回的函数保存在变量中然后在需要取消监听时调用它。
示例
下面是一个示例演示了如何使用 watch 函数
import { ref, watch } from vue;const count ref(0);// 监听 count 的变化
const stopWatch watch(count, (newValue, oldValue) {console.log(Count changed from, oldValue, to, newValue);
}, {immediate: true,deep: true
});// 修改 count 的值
count.value 1; // 输出: Count changed from 0 to 1// 停止监听 count 的变化
stopWatch();在这个示例中我们使用 watch 函数监听了 count 的变化当 count 的值发生变化时会执行回调函数并打印变化前后的值。同时我们在选项中设置了 immediate: true表示在初始化时立即执行回调函数。最后我们调用返回的函数 stopWatch 来停止对 count 的监听。
reactive, ref响应式 reactive 函数是 Vue 3 中用于创建响应式对象的函数之一。它的作用是将普通的 JavaScript 对象转换为响应式对象使得对象的属性可以被 Vue 追踪并在属性发生变化时触发相应的更新。 原理
reactive 函数的原理是通过Proxy 对象来实现的。它会包装传入的普通对象创建一个代理对象这个代理对象拦截了对原对象属性的访问、赋值、删除等操作在这些操作发生时会通知相关的依赖进行更新。
参数
reactive 函数接受一个普通的 JavaScript 对象作为参数将其转换为响应式对象。
返回值
reactive 函数的返回值是一个代理对象这个代理对象拦截了对原对象属性的访问、赋值、删除等操作。
示例
下面是一个使用 reactive 函数创建响应式对象的示例
import { reactive } from vue;const obj {count: 0
};// 使用 reactive 函数将普通对象转换为响应式对象
const reactiveObj reactive(obj);// 修改响应式对象的属性
reactiveObj.count; // 响应式地更新了 count 属性console.log(reactiveObj.count); // 输出: 1在这个示例中首先定义了一个普通的 JavaScript 对象 obj然后使用 reactive 函数将其转换为响应式对象 reactiveObj。接着我们通过修改 reactiveObj 的属性 count并在控制台输出结果可以看到 count 的值被成功更新为 1这说明 reactive 函数成功地创建了一个响应式对象并实现了对属性的监听和更新。
ref 函数是 Vue 3 中用于创建响应式引用的函数之一。它的作用是将普通的 JavaScript 值转换为响应式对象使得这个值可以被 Vue 追踪并在值发生变化时触发相应的更新。下面是关于 ref 函数的详细说明
原理 ref 函数的原理是通过一个封装了传入值的响应式对象来实现的。它返回的对象具有一个 value 属性这个 value 属性存储着传入的值并且这个对象上的 value 属性是响应式的当这个属性的值发生变化时相关的依赖会被触发更新。 参数
ref 函数接受一个普通的 JavaScript 值作为参数将其转换为响应式引用。
返回值
ref 函数的返回值是一个包含 value 属性的对象这个 value 属性存储着传入的值并且是响应式的。
示例
下面是一个使用 ref 函数创建响应式引用的示例
import { ref } from vue;// 使用 ref 函数创建响应式引用
const count ref(0);// 修改响应式引用的值
count.value; // 响应式地更新了值console.log(count.value); // 输出: 1在这个示例中我们使用 ref 函数创建了一个响应式引用 count并初始化其值为 0。然后我们通过修改 count.value 的值触发了响应式更新并在控制台输出结果可以看到 count.value 的值被成功更新为 1这说明 ref 函数成功地创建了一个响应式引用并实现了对值的监听和更新。
对比
reactive 和 ref 是 Vue 3 中常用的两种创建响应式数据的方式它们各自有着不同的优缺点适用于不同的场景
reactive 的优缺点
优点
适用于复杂对象 reactive 可以将整个对象转换为响应式对象适用于对复杂对象进行监听和更新。自动深度响应式 reactive 会递归地将对象的所有属性转换为响应式因此在嵌套对象中也能实现深度响应式。直观性 在处理对象时reactive 更符合直觉因为可以直接操作对象的属性。
缺点
性能开销较大 对于大型对象或嵌套层级较深的对象reactive 的性能开销较大因为它需要递归地追踪所有属性的变化。不适合基本类型 reactive 更适用于对象类型对于基本类型的数据并不是最佳选择。
ref 的优缺点
优点
性能优化 ref 只会追踪基本类型数据或简单对象的变化因此性能开销相对较小。直接访问值 使用 ref 创建的对象直接访问值更加方便不需要通过 .value 来获取值。更灵活 可以在需要时将普通的 JavaScript 值转换为响应式值非常灵活。
缺点
不支持深度监听 ref 不支持深度监听只能追踪其 value 属性的变化对于嵌套对象的监听需要额外处理。不适用于复杂对象 对于复杂的对象结构ref 并不直观也不方便进行监听和更新。
总结
如果需要监听复杂对象或嵌套对象的变化并且不在意性能开销可以选择使用 reactive。如果需要更轻量级的响应式数据并且关注性能优化可以选择使用 ref。在实际开发中根据具体的需求和场景来选择合适的响应式方式有时也会同时使用 reactive 和 ref 来达到最佳效果。
计算属性computed 计算属性声明成一个方法, 实际是这个方法的返回值 computed 函数是 Vue.js 中一个非常重要的概念它用于声明计算属性。计算属性是基于响应式依赖进行缓存的只有在依赖发生变化时才会重新计算。 原理 依赖追踪 当组件渲染时Vue 会执行 computed 函数并在执行过程中访问所依赖的响应式属性或其他计算属性。Vue 会在内部追踪这些依赖关系。 缓存计算结果 Vue 会将计算属性的结果缓存起来只有当其依赖发生变化时才会重新计算。这样可以确保在多次访问同一个计算属性时只进行一次计算提高性能。 响应式更新 如果计算属性依赖的响应式属性发生变化Vue 会自动重新计算计算属性的值并触发相应的更新操作确保视图与数据保持同步。
参数及含义
computed 函数接收一个对象作为参数对象的每个键值对都表示一个计算属性的定义其中
键key 计算属性的名称。值value 计算属性的定义可以是一个函数或包含 get 和 set 方法的对象。
如果值是一个函数则该函数会被当作计算属性的 getter 方法。如果需要设置计算属性的值可以通过定义 set 方法来实现。
返回结果
计算属性的返回结果是根据其定义的 getter 函数或 get 方法计算得出的值。这个值会被缓存起来并在其依赖发生变化时更新。计算属性的返回结果可以直接在模板中使用就像普通的属性一样。
总的来说computed 函数的原理是基于响应式依赖进行缓存的参数包括计算属性的名称和定义返回结果是根据定义计算得出的值。通过计算属性我们可以方便地定义复杂的逻辑并确保在需要时进行自动更新。
假设我们有一个 Vue 组件其中包含一个计算属性来计算商品的总价计算属性依赖于商品的价格和数量。下面是一个基本的示例代码
templatedivh2商品信息/h2p商品名称{{ productName }}/pp单价{{ price }}/pp数量input typenumber v-modelquantity/pp总价{{ totalPrice }}/p/div
/templatescript
export default {data() {return {productName: 手机,price: 1000, // 单价quantity: 1, // 数量};},computed: {// 计算商品总价totalPrice() {return this.price * this.quantity;},},
};
/script在上面的示例中我们定义了一个 totalPrice 计算属性它通过 price 和 quantity 计算出商品的总价。当 price 或 quantity 发生变化时totalPrice 会自动重新计算并更新到视图中。
这个示例展示了 computed 函数的使用方式定义一个计算属性然后通过 getter 方法来计算属性的值。在模板中我们可以直接使用计算属性的名称来获取其值而不需要手动调用计算方法。
这样Vue 会在内部自动追踪依赖关系并确保在依赖发生变化时及时更新计算属性的值。这种方式能够简化代码并提高性能。
Vite
简单的类比Vite相当于Maven或者Vue Cli可以快速的生成一个项目脚手架并引入部分基础依赖 Vite法语意为 “快速的”发音 /vit/发音同 “veet”是一种新型前端构建工具能够显著提升前端开发体验。它主要由两部分组成 一个开发服务器它基于 原生 ES 模块 提供了 丰富的内建功能如速度快到惊人的 模块热更新HMR。 一套构建指令它使用 Rollup 打包你的代码并且它是预配置的可输出用于生产环境的高度优化过的静态资源。 Vite 是一个基于 Rollup 和浏览器原生 ES 模块支持的快速开发服务器用于构建现代 Web 应用。它提供了一组命令行工具来帮助你初始化、开发、构建和测试你的项目。以下是 Vite 的常用命令及其参数、含义和作用 1. vite init 参数 app-name要创建的项目名称。--template template-name指定项目模板默认为 vue可选的模板有 vue、vue-ts、react、react-ts、preact、lit-element、svelte、vanilla。--force强制在非空目录中创建项目。 含义 初始化一个新的 Vite 项目。
2. vite dev 参数 无 含义 启动开发服务器用于开发模式下的实时预览和热模块替换。
3. vite build 参数 --base path指定构建输出的基础路径默认为 /。--outDir dir指定构建输出的目录默认为 dist。--assetsDir dir指定构建输出的静态资源目录默认为 _assets。--assetsInlineLimit num指定是否将小于指定大小的静态资源内联默认为 4096 字节。--sourcemap是否生成 source map默认为 false。 含义 打包生产环境的项目代码生成优化过的静态资源文件。
4. vite serve 参数 无 含义 启动生产服务器用于在本地预览生产环境构建的应用。
5. vite preview 参数 无 含义 在生产环境下预览应用。
6. vite inspect 参数 无 含义 查看 Vite 配置的内部信息。
7. vite optimize 参数 无 含义 优化项目的构建输出。
这些是 Vite 常用的命令及其参数、含义和作用。通过这些命令你可以方便地进行项目初始化、开发、构建和测试。
Vite项目
Vite 项目通常具有以下目录结构
my-vite-project/
├── node_modules/ # 依赖的 Node.js 模块
├── public/ # 公共静态资源
│ ├── favicon.ico # 网站图标
├── src/ # 项目源代码
│ ├── assets/ # 静态资源文件图片、字体等
│ ├── components/ # 组件文件
│ ├── App.vue # 根组件
│ └── main.js # 项目入口文件
|—— index.html # 入口html文件
├── .gitignore # Git 忽略文件配置
├── package.json # 项目配置文件
├── vite.config.js # Vite 配置文件
└── README.md # 项目说明文档下面是各部分的作用 node_modules/存放项目依赖的 Node.js 模块通常使用 npm 或者 Yarn 等包管理工具进行安装。 public/存放公共静态资源文件如网站图标favicon.ico。这里的内容会被直接复制到最终构建的输出目录中。 src/存放项目的源代码文件。 assets/存放静态资源文件如图片、字体等。components/存放 Vue 组件文件。App.vue根组件是整个 Vue 应用的入口组件。main.js项目的入口文件用于初始化 Vue 应用并挂载根组件到 DOM 中。 .gitignoreGit 忽略文件配置指定哪些文件或目录不应纳入版本控制。 package.json项目配置文件包含项目的元数据如名称、版本号、作者等以及项目依赖的 Node.js 模块列表。 vite.config.jsVite 的配置文件用于配置构建、开发服务器等选项。 README.md项目说明文档通常包含项目的简要介绍、使用方法、贡献指南等信息。
Vite 项目是如何运行起来的呢 当执行 vite dev 命令时Vite 会读取项目中的 vite.config.js 文件并根据配置启动开发服务器。 开发服务器会监听文件变化当文件发生变化时会重新构建相关的模块并通过浏览器的热模块替换功能实时更新页面。 当执行 vite build 命令时Vite 会读取项目中的 vite.config.js 文件并根据配置进行项目的打包构建。 构建完成后Vite 会生成优化过的静态资源文件并将其输出到指定的输出目录中供部署到生产环境使用。
通过以上步骤Vite 项目就可以成功运行起来并且可以在开发和生产环境中高效地构建和运行。
运行流程 npm run dev之后vite会依据main.js中的逻辑执行一系列初始化操作最终会将各种组件渲染到index.html页面上 自定义组件 在企业级项目中不再以视图作为单元而是组件 需要将操作数据和视图都封装成一个组件可以在项目的其他地方调用 全局注册组件 组件需要先注册才能够使用 通过全家注册就能在任意位置使用组件了 要在 Vue.js 中全局注册组件你可以在项目的入口文件通常是 main.js或者在一个单独的文件中注册组件然后在入口文件中引入这个文件。 以下是在入口文件中全局注册组件的示例
// main.jsimport Vue from vue;
import App from ./App.vue;
import MyComponent from ./components/MyComponent.vue; // 引入要注册的组件Vue.component(my-component, MyComponent); // 全局注册组件可以使用 my-component 标签new Vue({render: h h(App),
}).$mount(#app);在上面的例子中我们先引入了要注册的组件 MyComponent.vue然后使用 Vue.component 方法将其全局注册为 my-component 组件。这样在整个应用中就可以直接使用 my-component 标签来引用这个组件了。
另外如果你希望在单独的文件中注册组件可以按照以下步骤进行 创建一个新的文件比如 globalComponents.js。 在这个文件中注册组件并导出 // globalComponents.jsimport Vue from vue;
import MyComponent from ./components/MyComponent.vue;Vue.component(my-component, MyComponent);在入口文件中引入这个文件即可 // main.jsimport Vue from vue;
import App from ./App.vue;
import ./globalComponents; // 引入全局组件注册文件new Vue({render: h h(App),
}).$mount(#app);这样就可以在 Vue.js 中全局注册组件了。
props 将组件类比成方法那么props就是传入方法的参数 在 Vue.js 中props 是用于父组件向子组件传递数据的一种机制。它允许父组件通过属性的形式向子组件传递数据子组件可以接收并在其内部使用这些数据。以下是关于 props 的详细说明 原理
当父组件向子组件传递数据时可以通过在子组件的标签上使用属性的形式传递数据。子组件通过在自己的选项中定义 props 属性来接收传递过来的数据。
作用
在父子组件之间传递数据。实现组件的可复用性使得组件可以接受不同的数据从而达到灵活配置的目的。
使用方法 在子组件中通过 props 属性定义接收的数据 // ChildComponent.vuescript
export default {props: {message: String, // 接收一个名为 message 的 String 类型的 propcount: {type: Number, // 接收一个名为 count 的 Number 类型的 propdefault: 0, // 默认值为 0},items: { // 接收一个名为 items 的 Array 类型的 proptype: Array,required: true, // 必传 prop},},// 组件逻辑...
}
/script在父组件中通过子组件的标签属性传递数据 !-- ParentComponent.vue --templatedivchild-component :messageparentMessage :countparentCount :itemsparentItems //div
/templatescript
import ChildComponent from ./ChildComponent.vue;export default {components: {ChildComponent,},data() {return {parentMessage: Hello from parent,parentCount: 10,parentItems: [item1, item2, item3],};},
};
/script代码示例
下面是一个简单的例子演示了如何在父组件中向子组件传递数据
!-- ParentComponent.vue --templatedivchild-component :messageparentMessage //div
/templatescript
import ChildComponent from ./ChildComponent.vue;export default {components: {ChildComponent,},data() {return {parentMessage: Hello from parent,};},
};
/script!-- ChildComponent.vue --templatedivp{{ message }}/p/div
/templatescript
export default {props: {message: String,},
};
/script在这个例子中父组件 ParentComponent 中定义了一个 parentMessage 数据并通过 child-component 标签的 message 属性向子组件传递了这个数据。子组件 ChildComponent 中通过 props 接收并使用了这个数据最终渲染到页面上。
