Vue.js 如果道具直接指定给模板中的对象，则意外触发Vue道具观察程序

代码如下：

<template>
  <div>
    <foo :setting="{ value: 'hello' }" />
    <button @click="() => (clicked++)">{{ clicked }}</button>
  </div>
</template>

<script>
import Vue from 'vue'

// dummy component with dummy prop
Vue.component('foo', {
  props: {
    setting: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    setting() {
      console.log('watch:setting')
    },
  },
  render(createElement) {
    return createElement(
      'div',
      ['Nothing']
    )
  },
})

export default {
  data() {
    return {
      clicked: 0,
    }
  },
}
</script>

{{点击}}
从“Vue”导入Vue
//带虚拟支柱的虚拟构件
Vue.组件（'foo'{
道具：{
设置：{
类型：对象，
默认值：（）=>（{}），
},
},
观察：{
设置（）{
console.log（'watch:setting'）
},
},
渲染（createElement）{
返回createElement(
"div",，
[什么都没有]
)
},
})
导出默认值{
数据（）{
返回{
已单击：0，
}
},
}

我还做了一个密码笔：

问题是：每次我点击按钮，foo组件中

设置

道具的观察器都会触发，我猜原因是

：设置

中的内容在重新渲染时被重新评估，但我不确定

这种行为本身不会引起任何问题，但如果没有引起足够的注意，它可能会导致不必要的更新，甚至是bug（实际上我只是做了一个，这就是为什么我要问：D）。使用

：setting=“settingValue”

可以轻松解决此问题，但我想知道是否有替代解决方案或最佳做法。我看到一些代码也直接在模板中分配对象，感觉很自然和方便

感谢所有能够给出解释或提示的人。

首先：“每次更新父组件时，子组件中的所有道具都将使用最新值刷新。”

通过在模板中使用

v-bind:propA=“XX”

，您告诉Vue“XX是JavaScript表达式，我想将其用作propA的值” 所以，如果您使用

{value:'hello'}

表达式，这是字面上的“创建新对象”表达式，那么每次重新呈现父对象时，是否真的会创建（并且在您的示例中执行watcher）令人惊讶的新对象

为了更好地理解Vue，请记住模板中的所有内容都始终编译为纯JavaScript，并使用该工具查看Vue编译器的输出

例如，像这样的模板：

被编译成以下内容：

function render（）{
（这个）{
返回c（'foo'{
属性：{
“设置”：{
值：“你好”
}
}
})
}
}

模板如下：

被编译成以下内容：

function render（）{
（这个）{
返回c（'foo'{
属性：{
“设置”：数据成员或已计算
}
})
}
}

很明显，在第一个示例中，每次都会创建一个新对象，而在第二个示例中，使用了对对象的相同引用（相同或不同…取决于逻辑）

我看到一些代码也直接在模板中分配对象，感觉很自然和方便

我仍然是Vue新手，但我会不时浏览Vuetify等“大”库的源代码，以了解一些新的内容，我不认为将“新对象”表达式传递到prop中是常见的模式（这有什么用处？）

非常常见的是

-这是一件非常不同的事情…

首先：“每次更新父组件时，子组件中的所有道具都将使用最新值刷新”

通过在模板中使用

v-bind:propA=“XX”

，您告诉Vue“XX是JavaScript表达式，我想将其用作propA的值” 所以，如果您使用

{value:'hello'}

表达式，这是字面上的“创建新对象”表达式，那么每次重新呈现父对象时，是否真的会创建（并且在您的示例中执行watcher）令人惊讶的新对象

为了更好地理解Vue，请记住模板中的所有内容都始终编译为纯JavaScript，并使用该工具查看Vue编译器的输出

例如，像这样的模板：

被编译成以下内容：

function render（）{
（这个）{
返回c（'foo'{
属性：{
“设置”：{
值：“你好”
}
}
})
}
}

模板如下：

被编译成以下内容：

function render（）{
（这个）{
返回c（'foo'{
属性：{
“设置”：数据成员或已计算
}
})
}
}

很明显，在第一个示例中，每次都会创建一个新对象，而在第二个示例中，使用了对对象的相同引用（相同或不同…取决于逻辑）

我看到一些代码也直接在模板中分配对象，感觉很自然和方便

我仍然是Vue新手，但我会不时浏览Vuetify等“大”库的源代码，以了解一些新的内容，我不认为将“新对象”表达式传递到prop中是常见的模式（这有什么用处？）

---

非常常见的是

-这是一件非常不同的事情…

谢谢你指出这个文件，这肯定是我错过的。我明白了为什么会触发观察者，只是不知道怎么触发。谢谢你的编译工具，这真的很有帮助！谢谢你指点医生，这肯定是我错过的。我明白了为什么会触发观察者，只是不知道怎么触发。谢谢你的编译工具，这真的很有帮助！