外部脚本传值给Vue实例不生效如何正确解决？

• 赋值逻辑错误：external_value: pass_to_vue 这行只是把pass_to_vue函数本身的引用赋值给了字段，没有执行函数调用，自然拿不到返回的数据值。
• 作用域遮蔽问题：pass_to_vue函数的形参命名为data，和外部全局作用域定义的let data = [{id:'1'}]重名，函数内部访问data时会优先取形参，不会自动拿到外部的同名变量，就算补了函数调用括号但不传参，拿到的返回值也是undefined。

方案1：保留原有传值函数的写法 #

调整函数调用逻辑，传入目标外部数据作为实参即可，建议把外部全局变量改名避免重名混淆，示例代码如下：

<script>
// 全局作用域的待传数据，改名避免和函数形参重名
let globalData = [{id:'1'}]
function pass_to_vue(data){
    return data
}
</script> 
 
<script>
var app = new Vue({
    el: '#app',
    data: {
        // 加括号执行函数，传入要传递的外部数据作为实参
        external_value: pass_to_vue(globalData)
    }
})
</script>

方案2：简化写法（无额外处理逻辑时推荐） #

如果pass_to_vue函数没有额外的数据加工逻辑，完全不需要套一层函数，直接在Vue实例的data里读取全局作用域的变量赋值即可：

var app = new Vue({
    el: '#app',
    data: {
        external_value: globalData
    }
})

注意：如果传入的是数组、对象这类引用类型值，Vue实例内对该值的修改会同步修改全局作用域的原变量。如果不需要这种联动，可以传入拷贝后的值：浅拷贝可写external_value: [...globalData]（数组）或external_value: {...globalData}（对象），复杂嵌套结构可使用JSON.parse(JSON.stringify(globalData))做深拷贝。

内容的提问来源于stack exchange，提问作者Leander Costa