vue3下watch的使用

Posted 2023-04-01 笑道三千

既然是数据监听，监听的是它的变化。那么就需要能够捕获它的变更，于是监听的数据必然要是响应式数据

watch(WatcherSource, Callback, [WatchOptions])
参数：
WatcherSource：想要监听的响应式数据。
Callback：执行的回调函数，入参（newValue,oldValue）。
[WatchOptions]：deep、immediate、flush可选。

对于WatchOptions的参数配置：

deep:当需要对对象等引用类型数据进行深度监听时，设置deep: true,默认值是false。
immediate：默认情况下watch是惰性的，设置immediate: true时，watch会在初始化时立即执行回调函数一次。
flush：控制回调函数的执行时机，。它可设置为 pre、post 或 sync。
	pre：默认值，当监听的值发生变更时，优先执行回调函数（在dom更新之前执行）。
	post：dom更新渲染完毕后，执行回调函数。
	sync:一旦监听的值发生了变化，同步执行回调函数（建议少用）。

一，监听单个数据ref

const count = ref(1);
watch(count, (newValue, oldValue) => 
  console.log('值发生了变更', newValue, oldValue);
);

可以获取到新值和旧值。

二，监听引用类型数据ref:深度监听

const count = ref(
  a: 1,
  b: 2
);
const handleClick = function () 
 count.value.a = 5;
;
watch(count, (newValue, oldValue) => 
  console.log('值发生了变更', newValue, oldValue);
);

这种情况下，我监听的是整个数组，它是引用数据类型，内部的某一项发生了变更并不会被监听到。所以watch中的代码并没有执行。

1，引用类型ref直接深度监听

此时，就需要使用深度监听：deep:true

const count = ref(
  a: 1,
  b: 2
);
const handleClick = function () 
  count.value.a = 5;
;
watch(
  count,
  (newValue, oldValue) => 
    console.log('值发生了变更', newValue, oldValue);
  ,
   deep: true 
);

值发生了变更 Proxy a: 5, b: 2 Proxy a: 5, b: 2

可以注意到的是，深度监听的需要是这个引用数据类型自身，而不是其中的属性。并且，他只能获取到新值，而获取不到旧的值。

2，引用类型ref深拷贝深度监听

const count = ref(
  a: 1,
  b: 2
);
const handleClick = function () 
  count.value.a = 5;
;
watch(
  () => 
    return  ...count.value ;
  ,
  (newValue, oldValue) => 
    console.log('值发生了变更', newValue, oldValue);
  ,
   deep: true 
);

这样把watch的引用类型数据源深拷贝一份，即可完成对新旧值得获取:

值发生了变更 a: 5, b: 2 a: 1, b: 2

三，监听单个数据：reactive

const single = reactive( count: 1, test: 2 );
const handleClick = function () 
  single.count++;
;
watch(
  () => single.count,
  (newValue, oldValue) => 
    console.log('值发生了变更', newValue, oldValue);
  ,
   immediate: true 
);

这里主要是() => single.count，监听的是single中的count,只有这个属性发生了变化才会触发回调函数。这种情况下是可以获取到新旧值的。

四，监听引用类型数据：reactive

<template>
  <div class="mine-box">
    <div ref="countDom"> single.count </div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script setup>
import  ref, reactive, watch  from 'vue';
const single = reactive( count: 1, test:  a: 1, b: 2  );
const handleClick = function () 
  single.test.a++;
;
watch(
  single,
  (newValue, oldValue) => 
    console.log('值发生了变更', newValue, oldValue);
  ,
   immediate: true 
);
</script>

reactive的数据，用不用deep：true是没有影响的，single中的一个属性发生了变化，都能被监听到，继而执行回调函数。

和三中有所不同的是，这种情况下是只能获取到新值的。

五，immediate: true

默认情况下watch是惰性的，当我们设置immediate: true时，watch会在初始化时立即执行回调函数。

const count = ref(1);
const handleClick = function () 
  count.value++;
;
watch(
  count,
  (newValue, oldValue) => 
    console.log('值发生了变更', newValue, oldValue);
  ,
   deep: true, immediate: true 
);

六，监听多个数据源

const count = ref(1);
const double = ref(2);
const handleClick = function () 
  count.value++;
  double.value++;
;
watch(
  [count, double],
  (newValue, oldValue) => 
    console.log('值发生了变更', newValue, oldValue);
  ,
   deep: true, immediate: true 
);

有一个值发生了变更，则会触发watch，如果两个值同时发生变更，同样只是触发一次watch的回调函数。

如果想变更一格数据就触发一次回调，可以在两个数据变更中间加下nextTick。

七，flush的配置

1，默认情况下在dom渲染完毕前调用回调函数

默认情况下，flush的值是pre，当监听的值发生变更时，优先执行回调函数（在dom更新之前执行）。这就意味着，如果在回调函数中有相关dom的操作，而参数里面配置了immediate:true，则会报错，因为这个时候dom还没有被渲染，是获取不到dom的。

接下来看下代码：

<template>
  <div class="mine-box">
    <div ref="countDom"> count </div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script setup>
import  ref, watch  from 'vue';
const count = ref(1);
const countDom = ref(null);
const handleClick = function () 
  count.value++;
;
watch(
  count,
  (newValue, oldValue) => 
    console.log('---', countDom.value.textContent);
    console.log('值发生了变更', newValue, oldValue);
  ,
   deep: true 
);
</script>

得到的结果：

--- 1
值发生了变更 2 1

可以看到，回调函数中新的值已经变成了2，而获取到的dom还是之前的。说明默认情况下，flush的值是pre,当有值变更时，是在dom更新之前触发回调函数的执行。

2，flush: 'post’在dom渲染完毕后执行回调函数

<template>
  <div class="mine-box">
    <div ref="countDom"> count </div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script setup>
import  ref, watch  from 'vue';
const count = ref(1);
const countDom = ref(null);
const handleClick = function () 
  count.value++;
;
watch(
  count,
  (newValue, oldValue) => 
    console.log('---', countDom.value.textContent);
    console.log('值发生了变更', newValue, oldValue);
  ,
   deep: true, flush: 'post' 
);
</script>

得到的结果：

--- 2
值发生了变更 2 1

可以看到，是在dom更新完毕之后才调用的回调函数，这时候获取到的dom是数据变更后更新完毕的dom。

八，总结

当使用ref创建的响应式数据时。

1，基本数据类型：可以直接监听，可获取新旧值。
2，引用数据类型：需要deep:true深度监听，但是只能获取新值。要想获取新旧值，要想获取新旧值，需要监听目标数据的深拷贝。

当使用reactive创建的响应式数据时。

1，基本数据类型：可以直接指定某个属性进行监听，可以获取到新旧值。
2，引用数据类型：直接监听创建的reactive对象，其中只要有属性变更，都能被监听到。但是它只能获取到新值。
3，reactive创建的响应式数据，深度监听设置是无效的，也就是deep:true/false都是能监听到的。

deep参数

默认是false,只有使用ref创建的响应式引用类型的数据是，才启用。才生效。

immediate参数

默认是false,初始化的时候不执行回调函数。
如果是true,初始化的时候就会执行一次回调函数。

flush参数

默认是'pre',在dom渲染之前执行回调函数，如果有immediate：true时，回调函数有获取dom操作，则会报错，因为初始化时dom还没生成。
设置成'post'，则是在dom渲染完毕（监听的数据变更后dom渲染完毕）后，再执行回调函数。

在 vue-cli 3.x 的 watch 模式下每个 webpack 自动构建后如何执行我自己的脚本？

【中文标题】在 vue-cli 3.x 的 watch 模式下每个 webpack 自动构建后如何执行我自己的脚本？

【英文标题】：How to execute my own script after every webpack's auto build in watch mode of vue-cli 3.x?

【发布时间】：2020-02-08 01:18:23

【问题描述】：

我现在的情况

现在我正在使用 vue-cli@3.9.2。出于某种原因，我需要使用vue-cli-service build --watch 观察源代码的文件更改以运行 webpack 的构建。

我目前的解决方案

目前，我运行另一个 Node.js 进程来监视 webpack 包的文件更改。这种糟糕的开发经历让我深受打击。

与 vue-cli 2.x 比较

当我使用 vue-cli 2.x 时，我实际上在 build/build.js 中运行 webpack()，这是 webpack 的一个原生 API，因此我可以使用 webpack().watch() 来运行构建并将我自己的脚本作为回调函数传递.但是在 vue-cli 3.x 中，据我所知，没有办法也没有必要使用 webpack 的原生 API。

总结

我希望在 webpack 每次自动构建后运行我自己的脚本，虽然我在 vue-cli 的官方文档中找不到任何指导。

【参考方案1】：

据我了解 - 你有一个 Webpack 插件用例。就像 webpack-build-notifier 在重建后发送通知一样。

我不是 Webpack 插件作者，但这已经为我工作了：

// vue.config.js
const ArbitraryCodeAfterReload = function(cb) 
  this.apply = function(compiler) 
    if (compiler.hooks && compiler.hooks.done) 
      compiler.hooks.done.tap('webpack-arbitrary-code', cb);
    
  ;
;

const myCallback = function() 
  console.log('Implementing alien intelligence');
;

const plugins = [];
const isDev = process.env.NODE_ENV === 'development';
if (isDev) 
  plugins.push(new ArbitraryCodeAfterReload(myCallback));


module.exports = 
  configureWebpack: 
    plugins
  
;

如果这不是正确的编译步骤 - Webpack documentation 应该在某个地方为您的用例提供正确的 hook。

也许已经有一个可用的插件可以满足您的需求......

【讨论】：

这超出了我的认知，我没有写任何 webpack 插件。但是，如果我找不到任何现有的解决方案，我会尝试。非常感谢。

谢谢，成功了！但是，为 webpack 的 hook 创建一个插件是很奇怪的。

【参考方案2】：

也许这可以帮助你。这只是一个例子。你只需要使用&&

npm run start && npm run build

所以在 npm run start 脚本执行之后，你的 npm run build 脚本将在第一个之后运行

更新你可以使用这个包webpack-shell-plugin

const WebpackShellPlugin = require('webpack-shell-plugin');

new WebpackShellPlugin(
  onBuildStart: [''],
  onBuildEnd: ['']
)

【讨论】：

在监视模式下，它不会结束第一个命令，因此永远不会执行第二个命令。

你有 webpack 配置文件吗？

webpack config 由 vue-cli 管理和构建，我可以通过 vue-cli 对其进行编辑，最终构建的 config 非常复杂。

这对我来说很难，因为我无法修改 webpack 配置文件。但是我使用 webpack shell 命令来解决这个问题

@Array-Huang 再次检查我的答案。谢谢