Vue.js VueJs不'；将传递的道具绑定到数据时更新

我是vue的初学者。我想知道为什么vue的生命周期不会在值更新时触发

Vue.component（'list-table'{
道具：[“数据”]，
模板：`
{{mydata}}
`,
beforeUpdate（）{console.log（'before update'）}，
更新（）{console.log（'updated'）}，
数据（）{
返回{
mydata:this.data
}
}
})
const app=新的Vue({
el:“#应用程序”，
数据：{
数据：[
{f:'约翰'，l:'多伊'，g:'男性'}，
{f:'简'，l:'多伊'，g:'女'}，
{f:'约翰'，l:'史密斯'，g:'男性'}，
{f:'简'，l:'史密斯'，g:'女'}，
{f:'罗伊'，l:'史密斯'，g:'男性'}，
{f:'统治'，l:'史密斯'，g:'女性'}
],
项目页码：2，
当前页面：0
},
计算：{
过滤器列表（）{
const startIdx=this.currentPage*this.itemPerPage
const endIdx=startIdx+this.itemPerPage
返回这个.datum.slice（startIdx，endIdx）
},
总页数（）{
返回Math.ceil（this.datum.length/this.itemPerPage）
}
},
方法：{
设置页面（num）{
this.currentPage=num-1
}
}
})

您正在将组件的本地数据初始化为道具中的数据，但没有使用道具，因此不会进行更新。如果将组件更改为使用

data

而不是

mydata

，则会进行更新

如果要根据更新的数据进行某些更改，请单击数据

Vue.component（'list-table'{
道具：[“数据”]，
模板：`
{{data}}
`,
beforeUpdate（）{console.log（'before update'）}，
更新（）{console.log（'updated'）}，
数据（）{
返回{
mydata:this.data
}
}
})
const app=新的Vue({
el:“#应用程序”，
数据：{
数据：[
{f:'约翰'，l:'多伊'，g:'男性'}，
{f:'简'，l:'多伊'，g:'女'}，
{f:'约翰'，l:'史密斯'，g:'男性'}，
{f:'简'，l:'史密斯'，g:'女'}，
{f:'罗伊'，l:'史密斯'，g:'男性'}，
{f:'统治'，l:'史密斯'，g:'女性'}
],
项目页码：2，
当前页面：0
},
计算：{
过滤器列表（）{
const startIdx=this.currentPage*this.itemPerPage
const endIdx=startIdx+this.itemPerPage
返回这个.datum.slice（startIdx，endIdx）
},
总页数（）{
返回Math.ceil（this.datum.length/this.itemPerPage）
}
},
方法：{
设置页面（num）{
this.currentPage=num-1
}
}
})

名字
姓
性别
{{page}

您只需修改

mydata

即可触发更新

您可以执行以下操作：

this.mydata.paramthatdoesntextest=true

inside

mounted（）

---

这样，当安装组件时，我的数据会被修改，组件也会被更新。

是的，我已经知道了，但我的主要问题是，为什么传递新值时，

更新的

生命周期不会触发？实际上，我将它绑定到

mydata

而不是

data

上的原因有一个用例，没有发生更新。您更改的数据对DOM没有影响，因此不会更新任何内容。如果你想根据数据的变化做些什么，可以使用

watch

。啊，我明白了。所以手表是我唯一的选择。谢谢

mounted () {
  this.mydata.forceUpdate = true
}