vue.js 的引用对象检测

本文探讨了JavaScript中通过函数传递参数时的行为差异,重点分析了引用类型参数在函数内部修改时对原始变量的影响。通过具体示例展示了如何正确理解和使用这种特性。

section1:

以传参的形式不能直接变更vm.arr数组引用类型。

section2:

                

           testing code:

var myarr = [1,2];
$("#btn").click(function(){
  fn(myarr);//引用类型的传递
})
function fn(p){
  p = [4,5];//这里myarr不会变成1,2,而是重新开了一块内存空间存[4,5],因此p !== myarr
  p.push(3);//则myarr也会变成[1,2,3],so p === myarr
  if(myarr === p){
    alert(88888888)
  }

}




main.js:26 [Vue warn]: Property or method "handleOpen" 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://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. found in ---> <IndexCom> at src/components/index.vue <App> at src/App.vue <Root> warn @ vue.runtime.esm.js:4482 warnNonPresent_1 @ vue.runtime.esm.js:5082 get @ vue.runtime.esm.js:5115 render @ index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/index.vue?vue&type=template&id=47323bf2&scoped=true:44 Vue._render @ vue.runtime.esm.js:2649 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 merged @ vue.runtime.esm.js:4439 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 createChildren @ vue.runtime.esm.js:6335 createElm @ vue.runtime.esm.js:6243 patch @ vue.runtime.esm.js:6706 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 patch @ vue.runtime.esm.js:6737 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 eval @ main.js:26 ./src/main.js @ app.js:597 __webpack_require__ @ app.js:646 (anonymous) @ app.js:1797 __webpack_require__.O @ app.js:696 (anonymous) @ app.js:1798 (anonymous) @ app.js:1800Understand this errorAI main.js:26 [Vue warn]: Property or method "handleClose" 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://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. found in ---> <IndexCom> at src/components/index.vue <App> at src/App.vue <Root> warn @ vue.runtime.esm.js:4482 warnNonPresent_1 @ vue.runtime.esm.js:5082 get @ vue.runtime.esm.js:5115 render @ index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/index.vue?vue&type=template&id=47323bf2&scoped=true:45 Vue._render @ vue.runtime.esm.js:2649 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 merged @ vue.runtime.esm.js:4439 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 createChildren @ vue.runtime.esm.js:6335 createElm @ vue.runtime.esm.js:6243 patch @ vue.runtime.esm.js:6706 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 patch @ vue.runtime.esm.js:6737 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 eval @ main.js:26 ./src/main.js @ app.js:597 __webpack_require__ @ app.js:646 (anonymous) @ app.js:1797 __webpack_require__.O @ app.js:696 (anonymous) @ app.js:1798 (anonymous) @ app.js:1800Understand this errorAI main.js:26 [Vue warn]: Invalid handler for event "open": got undefined found in ---> <ElMenu> at packages/menu/src/menu.vue <ElAside> at packages/aside/src/main.vue <ElContainer> at packages/container/src/main.vue... (1 recursive calls) <IndexCom> at src/components/index.vue <App> at src/App.vue <Root> warn @ vue.runtime.esm.js:4482 updateListeners @ vue.runtime.esm.js:1859 updateComponentListeners @ vue.runtime.esm.js:3541 initEvents @ vue.runtime.esm.js:3520 Vue._init @ vue.runtime.esm.js:5443 VueComponent @ vue.runtime.esm.js:5576 createComponentInstanceForVnode @ vue.runtime.esm.js:4422 init @ vue.runtime.esm.js:4276 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 createChildren @ vue.runtime.esm.js:6335 createElm @ vue.runtime.esm.js:6243 patch @ vue.runtime.esm.js:6706 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 createChildren @ vue.runtime.esm.js:6335 createElm @ vue.runtime.esm.js:6243 patch @ vue.runtime.esm.js:6706 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 createChildren @ vue.runtime.esm.js:6335 createElm @ vue.runtime.esm.js:6243 patch @ vue.runtime.esm.js:6706 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 patch @ vue.runtime.esm.js:6706 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 merged @ vue.runtime.esm.js:4439 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 createChildren @ vue.runtime.esm.js:6335 createElm @ vue.runtime.esm.js:6243 patch @ vue.runtime.esm.js:6706 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 patch @ vue.runtime.esm.js:6737 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 eval @ main.js:26 ./src/main.js @ app.js:597 __webpack_require__ @ app.js:646 (anonymous) @ app.js:1797 __webpack_require__.O @ app.js:696 (anonymous) @ app.js:1798 (anonymous) @ app.js:1800Understand this errorAI main.js:26 [Vue warn]: Invalid handler for event "close": got undefined found in ---> <ElMenu> at packages/menu/src/menu.vue <ElAside> at packages/aside/src/main.vue <ElContainer> at packages/container/src/main.vue... (1 recursive calls) <IndexCom> at src/components/index.vue <App> at src/App.vue <Root> warn @ vue.runtime.esm.js:4482 updateListeners @ vue.runtime.esm.js:1859 updateComponentListeners @ vue.runtime.esm.js:3541 initEvents @ vue.runtime.esm.js:3520 Vue._init @ vue.runtime.esm.js:5443 VueComponent @ vue.runtime.esm.js:5576 createComponentInstanceForVnode @ vue.runtime.esm.js:4422 init @ vue.runtime.esm.js:4276 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 createChildren @ vue.runtime.esm.js:6335 createElm @ vue.runtime.esm.js:6243 patch @ vue.runtime.esm.js:6706 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 createChildren @ vue.runtime.esm.js:6335 createElm @ vue.runtime.esm.js:6243 patch @ vue.runtime.esm.js:6706 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 createChildren @ vue.runtime.esm.js:6335 createElm @ vue.runtime.esm.js:6243 patch @ vue.runtime.esm.js:6706 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 patch @ vue.runtime.esm.js:6706 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 merged @ vue.runtime.esm.js:4439 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 createChildren @ vue.runtime.esm.js:6335 createElm @ vue.runtime.esm.js:6243 patch @ vue.runtime.esm.js:6706 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 patch @ vue.runtime.esm.js:6737 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 eval @ main.js:26 ./src/main.js @ app.js:597 __webpack_require__ @ app.js:646 (anonymous) @ app.js:1797 __webpack_require__.O @ app.js:696 (anonymous) @ app.js:1798 (anonymous) @ app.js:1800Understand this errorAI main.js:26 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 mousewheel @ element-ui.common.js:1140 bind @ element-ui.common.js:1140 callHook @ vue.runtime.esm.js:6892 _update @ vue.runtime.esm.js:6812 updateDirectives @ vue.runtime.esm.js:6796 invokeCreateHooks @ vue.runtime.esm.js:6349 createElm @ vue.runtime.esm.js:6245 createChildren @ vue.runtime.esm.js:6335 createElm @ vue.runtime.esm.js:6243 patch @ vue.runtime.esm.js:6706 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 patch @ vue.runtime.esm.js:6706 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 merged @ vue.runtime.esm.js:4439 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 createChildren @ vue.runtime.esm.js:6335 createElm @ vue.runtime.esm.js:6243 patch @ vue.runtime.esm.js:6706 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 createChildren @ vue.runtime.esm.js:6335 createElm @ vue.runtime.esm.js:6243 patch @ vue.runtime.esm.js:6706 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 createChildren @ vue.runtime.esm.js:6335 createElm @ vue.runtime.esm.js:6243 patch @ vue.runtime.esm.js:6706 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 patch @ vue.runtime.esm.js:6706 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 merged @ vue.runtime.esm.js:4439 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 createChildren @ vue.runtime.esm.js:6335 createElm @ vue.runtime.esm.js:6243 patch @ vue.runtime.esm.js:6706 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 init @ vue.runtime.esm.js:4277 createComponent @ vue.runtime.esm.js:6264 createElm @ vue.runtime.esm.js:6226 patch @ vue.runtime.esm.js:6737 Vue._update @ vue.runtime.esm.js:3669 updateComponent @ vue.runtime.esm.js:3769 Watcher.get @ vue.runtime.esm.js:3363 Watcher @ vue.runtime.esm.js:3353 mountComponent @ vue.runtime.esm.js:3790 Vue.$mount @ vue.runtime.esm.js:8323 eval @ main.js:26 ./src/main.js @ app.js:597 __webpack_require__ @ app.js:646 (anonymous) @ app.js:1797 __webpack_require__.O @ app.js:696 (anonymous) @ app.js:1798 (anonymous) @ app.js:1800 main.js:26 [Intervention] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: http://localhost:8081/fonts/element-icons.ff18efd1.woff vue.runtime.esm.js:8334 Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/studentList.vue?vue&type=script&lang=js:17 后台返回的数据: {data: Array(4), status: 200, statusText: '', headers: AxiosHeaders, config: {…}, …}
最新发布
10-07
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值