乘03060920

vue中如何在watch监听中新增tinymce的撤销？

tinymce.undoManager.add() tinymce.undoManager.transact() 我知道以上两个命令是记录用户操作用于回滚的方法 在我的项目中需要监听 App.vue 传递过来的值从而替换编辑器中的展示的文档（dom） 所以我将 "tinymce" 运行在了 "watch" 中，代码如下： import tinymce from 'tinymce/tinymce' // tinymce 默认 hidden，不引入则不显示编辑器 import Editor from '@tinymce/tinymce-vue' watch(() => { return props.propChild }, (val) => { console.log('子组件接收', val) switch (val.edit) { case 'click': tinymce.activeEditor.getBody().querySelector('#' + val.id).scrollIntoView() break case 'edit': tinymce.activeEditor.getBody().querySelector('#' + val.id).innerText = val.idName tinymce.undoManager.add() // tinymce.undoManager.transact() break } }, { deep: true }) 但是在项目运行后，页面报错 tinymce.activeEditor.getBody().querySelector('#' + val.id).scrollIntoView() // 可以执行 tinymce.activeEditor.getBody().querySelector('#' + val.id).innerText = val.idName // 可以执行 tinymce.undoManager.add() // TypeError: Cannot read properties of undefined (reading 'add') tinymce.undoManager.transact() // TypeError: Cannot read properties of undefined (reading 'transact') 请问是为什么呢？

你好我叫张倩话

vue3 如何更好的写hooks函数？

关于vue3如何写hooks的问题？ export function useChangeTableHeaderWidth(list) { const time = Date.now() const getWidthClass = `getWidth${time}` const setWidthClass = `setWith${time}` function resizeStep(setWidthElement: HTMLElement) { const fontSize = window.getComputedStyle(setWidthElement).fontSize let size = parseInt(fontSize) const scrollwidth = setWidthElement.scrollWidth const clientWidth = setWidthElement.clientWidth if (scrollwidth > clientWidth && size > 0) { size -= 1 setWidthElement.style.fontSize = size + 'px' requestAnimationFrame(() => { resizeStep(setWidthElement) }) } } watch( list, () => { const getWidth = document.getElementsByClassName(getWidthClass) const setWidth = document.getElementsByClassName(setWidthClass) for (const index in getWidth) { if (Object.prototype.hasOwnProperty.call(setWidth, index)) { /* 获取td的宽度，设置给th */ const getWidthElement = getWidth[index] const width = getWidthElement.clientWidth const setWidthElement = setWidth[index] as HTMLElement // 这样写要去eslintrc文件里关闭对jsx的语法检查 // let setWidthElement = setWidth[index] setWidthElement.style.width = width + 'px' /* title字体大于宽度的时，让字体变小 */ const scrollwidth = setWidthElement.scrollWidth const clientWidth = setWidthElement.clientWidth if (scrollwidth > clientWidth) { resizeStep(setWidthElement) } } } }, { flush: 'post', }, ) return [getWidthClass, setWidthClass] } 如何限值list是ref值，亦或者即使传入的是普通值，也可以触发watch？还有就是这个hooks中的watch在使用了hooks之后一直存在吗，还是说组件销毁了watch就自动销毁，还是需要在这个hooks在写上组件卸载时手动销毁。 我记得antfu之前有个演讲提到过在hooks里用geter函数和tovalue、toref来提升兼容性，但是我记不清了，不知道能不能使用在这里，还有个effectScope我记得写hooks的时候好像也挺有用。

导师小jio

vue3+pinia使用的时候,watch疑惑？

vue3+pinia使用的时候，并没有对"state"赋值，watch为什么还能监听到变化？ 如果不用"mapState"，第一次也监听不到，问题就在"computed"和"mapState"，为什么会出现这种情况？ //strore import { defineStore } from "pinia" const useTestStore = defineStore({ id: 'testStore', state() { return { obj: { name: '张三' } } }, }) export default useTestStore import useTestStore from "./store" export default { computed: { ...mapState(useTestStore, ['obj']) }, watch: { obj: { handler(newValue, oldValue) { //这里为什么会执行？ console.log('sss', JSON.stringify(newValue), JSON.stringify(oldValue)) }, deep: true } }, }