場景：

列表的操作列有按鈕，通過v-directive指令控制按鈕顯隱；首次觸發了v-directive指令，控制按鈕顯隱正常；但是再次點擊條件查詢后，列表數據變化了渲染內容也正常，但是v-directive指令未觸發，導致按鈕顯隱不正常。

問題：

初始化時觸發了指令，但是數據更新后未觸發

原因：?

指令生命周期觸發不全?
自定義指令 v-dataAreaTableBtn 僅定義了 mounted 生命周期，數據更新時未觸發 update 鉤子
需補充 update 生命周期以響應數據變 即可

import { download } from '@/utils/download.js'// 提取公共邏輯
function updateButtonVisibility(el, binding) {// console.log('%c【' + '觸發指令' + '】打印', 'color:#fff;background:#0f0')let data_area = sessionStorage.getItem('data_area') // 放最外層會取不到switch (data_area) {case null:el.style.display = ""breakcase undefined:el.style.display = ""breakcase 2:el.style.display = "" // 2區下的列表數據按鈕直接放開 (因為說2區不會有3區數據 所以直接放開)breakcase "2":el.style.display = ""breakcase '3':el.style.display = (!binding.value ? true : binding.value == data_area) ? "" : "none" // 3區下的列表數據按鈕根據來源判斷 3的顯示 2的隱藏breakcase 3:el.style.display = (!binding.value ? true : binding.value == data_area) ? "" : "none"breakdefault:break}
}export default {install(Vue) {// 其他指令等Vue.directive('download', {mounted(el, binding) {el.addEventListener('click', () => {download('', binding.value || '', 'url')})},})// 自定義指令Vue.directive('dataAreaTableBtn', {mounted(el, binding) { // 初始化鉤子updateButtonVisibility(el, binding)},updated(el, binding) { // 新增更新鉤子updateButtonVisibility(el, binding)}});},
}