vuejs methods中的方法互相调用时变量的作用域是

Posted 2023-04-07

参考技术A 作用域：它是指对某一变量和方法具有访问权限的代码空间,在js中,作用域是在函数中维护的。表示变量或函数起作用的区域，指代了它们在什么样的上下文中执行，亦即上下文执行环境。javascript的作用域只有两种：全局作用域和本地作用域，本地作用域是按照函数来区分的。闭包：在js中的我的理解就是函数嵌套函数，当内部函数在定义它的作用域的外部被引用时,就创建了该内部函数的闭包,如果内部函数引用了位于外部函数的变量,当外部函数调用完毕后,这些变量在内存不会被释放,因为闭包需要它们.使用闭包要注意：1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在ie中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（publicmethod），把内部变量当作它的私有属性（privatevalue），这时一定要小心，不要随便改变父函数内部变量的值。

在 data() 方法中读取时，VueJS 属性未定义

【中文标题】在 data() 方法中读取时，VueJS 属性未定义

【英文标题】：VueJS prop is undefined when read in data() method

【发布时间】：2018-10-09 17:41:49

【问题描述】：

我无法理解 props 在 VueJS 中的工作原理，我们将不胜感激。这是一个简单的谷歌地图组件，我希望在页面上显示它并将 div 的 id 元素作为道具动态传递给底层模板。

html文件-

<div id="app">
    <google-map name="map"></google-map>
</div>

vue 文件-

<template>
    <div :id="mapName"></div>
</template>

<script>
module.exports = 
    name: 'google-map',
    props: [ 'name' ],
    data: () => 
        console.log(this.name); // ERROR: name is undefined
        return 
            mapName: this.name
        ;
    ,
    mounted: () => 
        const map = new google.maps.Map(document.getElementById(this.mapName), 
            zoom: 14,
            center: new google.maps.LatLng(39.305, -76.617)
        );
    

</script>

<style scoped>
#map 
  width: 800px;
  height: 600px;
  margin: 0 auto;
  background: gray;

</style>

我得到的错误是 this.name 在组件对象的 data() 方法中未定义。

【问题讨论】：

完全删除name 和data；并使用name 而不是mapName。 guide的介绍部分的解释。

如果您希望发送name 并在子组件中使用mapName，请添加计算属性：computed: mapName: () => this.name 。

【参考方案1】：

console.log(this.name); 返回 undefined 的原因是您正在使用箭头函数。应该是

data: function() 
    // ...
,

mounted: function() 
    // ...

或

data() 
    // ...
,

mounted() 
    // ...

说明：

见https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

【讨论】：

这就是原因...非常感谢！

你拯救了我的一天！只是想知道为什么它实际上不起作用？

@AmirrezaNasiri 请参阅vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks =] 中的警告部分

@JacobGoh 哦，我明白了！我的错。