使用Vue的时候记录一个教训

 

如下:

global是全局变量

global.showdata是父列表的绑定数据分配给子组件

如 在子组件中修改 global.showdata[index].likes = likes

导致父组件重新渲染 又一次的分配数据给子组件 这要就形成了一个死循环 就会导致如下错误

VM608:1 [Vue warn]: Property or method "toJSON" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in pages/showvideo/showvideo)
console.error @ VM608:1
warn @ mp.runtime.esm.js:613
warnNonPresent @ mp.runtime.esm.js:2026
get @ mp.runtime.esm.js:2080
cloneWithData @ mp.runtime.esm.js:5615
patch @ mp.runtime.esm.js:5628
Vue._update @ mp.runtime.esm.js:3965
updateComponent @ mp.runtime.esm.js:5696
get @ mp.runtime.esm.js:4425
run @ mp.runtime.esm.js:4501
flushSchedulerQueue @ mp.runtime.esm.js:4257
(anonymous) @ mp.runtime.esm.js:1990
flushCallbacks @ mp.runtime.esm.js:1919
Promise.then (async)
timerFunc @ mp.runtime.esm.js:1945
nextTick @ mp.runtime.esm.js:2001
queueWatcher @ mp.runtime.esm.js:4348
update @ mp.runtime.esm.js:4490
notify @ mp.runtime.esm.js:736
reactiveSetter @ mp.runtime.esm.js:1070
proxySetter @ mp.runtime.esm.js:4577
success @ videoitem.vue:280
success @ util.js:152
o.(anonymous function) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
C @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
i.emit @ VM624 WAService.js:1
Ci @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
n @ VM622 asdebug.js:1
(anonymous) @ VM622 asdebug.js:1
t.emit @ VM622 asdebug.js:1
callback @ VM622 asdebug.js:1
(anonymous) @ VM622 asdebug.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
setTimeout (async)
setTimeout @ VM624 WAService.js:1
a @ VM622 asdebug.js:1
t @ VM622 asdebug.js:1
S.onreadystatechange @ VM622 asdebug.js:1
XMLHttpRequest.send (async)
v @ VM622 asdebug.js:1
createRequestTask @ VM622 asdebug.js:1
n @ VM622 asdebug.js:1
invoke @ VM624 WAService.js:1
i @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
Oi @ VM624 WAService.js:1
a @ VM624 WAService.js:1
n @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
p.(anonymous function) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
invokeApi @ index.js:217
promiseApi @ index.js:275
global.netagent @ util.js:141
likefun @ videoitem.vue:263
videoclickfun @ videoitem.vue:156
(anonymous) @ index.js:1120
(anonymous) @ index.js:1087
handleEvent @ index.js:1077
r.safeCallback @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
r @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
n @ VM622 asdebug.js:1
(anonymous) @ VM622 asdebug.js:1
(anonymous) @ VM622 asdebug.js:1
_ws.onmessage @ VM622 asdebug.js:1
Show 33 more frames
VM608:1 TypeError: Converting circular structure to JSON
    at JSON.stringify ()
    at cloneWithData (mp.runtime.esm.js:5615)
    at VueComponent.patch [as __patch__] (mp.runtime.esm.js:5628)
    at VueComponent.Vue._update (mp.runtime.esm.js:3965)
    at VueComponent.updateComponent (mp.runtime.esm.js:5696)
    at Watcher.get (mp.runtime.esm.js:4425)
    at Watcher.run (mp.runtime.esm.js:4501)
    at flushSchedulerQueue (mp.runtime.esm.js:4257)
    at Array. (mp.runtime.esm.js:1990)
    at flushCallbacks (mp.runtime.esm.js:1919)
console.error @ VM608:1
patch @ mp.runtime.esm.js:5630
Vue._update @ mp.runtime.esm.js:3965
updateComponent @ mp.runtime.esm.js:5696
get @ mp.runtime.esm.js:4425
run @ mp.runtime.esm.js:4501
flushSchedulerQueue @ mp.runtime.esm.js:4257
(anonymous) @ mp.runtime.esm.js:1990
flushCallbacks @ mp.runtime.esm.js:1919
Promise.then (async)
timerFunc @ mp.runtime.esm.js:1945
nextTick @ mp.runtime.esm.js:2001
queueWatcher @ mp.runtime.esm.js:4348
update @ mp.runtime.esm.js:4490
notify @ mp.runtime.esm.js:736
reactiveSetter @ mp.runtime.esm.js:1070
proxySetter @ mp.runtime.esm.js:4577
success @ videoitem.vue:280
success @ util.js:152
o.(anonymous function) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
C @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
i.emit @ VM624 WAService.js:1
Ci @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
n @ VM622 asdebug.js:1
(anonymous) @ VM622 asdebug.js:1
t.emit @ VM622 asdebug.js:1
callback @ VM622 asdebug.js:1
(anonymous) @ VM622 asdebug.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
setTimeout (async)
setTimeout @ VM624 WAService.js:1
a @ VM622 asdebug.js:1
t @ VM622 asdebug.js:1
S.onreadystatechange @ VM622 asdebug.js:1
XMLHttpRequest.send (async)
v @ VM622 asdebug.js:1
createRequestTask @ VM622 asdebug.js:1
n @ VM622 asdebug.js:1
invoke @ VM624 WAService.js:1
i @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
Oi @ VM624 WAService.js:1
a @ VM624 WAService.js:1
n @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
p.(anonymous function) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
invokeApi @ index.js:217
promiseApi @ index.js:275
global.netagent @ util.js:141
likefun @ videoitem.vue:263
videoclickfun @ videoitem.vue:156
(anonymous) @ index.js:1120
(anonymous) @ index.js:1087
handleEvent @ index.js:1077
r.safeCallback @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
r @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
n @ VM622 asdebug.js:1
(anonymous) @ VM622 asdebug.js:1
(anonymous) @ VM622 asdebug.js:1
_ws.onmessage @ VM622 asdebug.js:1
Show 33 more frames

解决办法就是把分配给子组件的值重新序列化一遍 给 global.showdata[index] 这要就会丢掉和父的绑定关系 然后在回到父列表时 this.$forceUpdate() 就可以了

你可能感兴趣的:(Vue,vue,vue.js,javascript)