Vue2中使用双重非运算符赋值变量为何为undefined？

问题场景 #

在Vue2项目中，将data里的name设为字符串"yahya"，同时尝试将isNameSet赋值为!!name，预期isNameSet为true，但实际发现该变量表现异常。相关代码如下：

<body>
<div id="my-id">
    <h1> Welcome {{ name }} </h1>
    <h2> {{ '!name : ' + !name }} </h2>
    <h2> {{ '!!name : ' + !!name }} </h2>
    <h2> {{ 'isNameSet: ' + isNameSet }} </h2>
    <h3 v-text="isNameSet ? 'Your name is set!' : 'Please, Set a name !' " >  </h3>
    <h3 v-text="!!name ? 'Your name is set!' : 'Please, Set a name !' " >  </h3>
</div>

<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el: "#my-id",
        data: {
            name: "yahya",
            isNameSet: !!name
        },
    })
    console.log("typeof name      : ", typeof name)
    console.log("typeof isNameSet : ", typeof isNameSet)
</script>
</body>

问题原因 #

1. data对象初始化时无法引用同对象内的属性：你在data中写的!!name里的name，并不是指向data中的name: "yahya"，而是当前全局作用域的name变量。由于全局未声明name，这个变量实际是undefined，因此!!name的结果是false，而非预期的true。
2. 控制台打印混淆了全局变量与实例属性：你控制台中输出的typeof isNameSet : undefined，是因为直接访问了全局的isNameSet，而非Vue实例的vm.isNameSet。Vue实例的isNameSet实际值为false，但你误将全局变量的结果当成了实例属性的结果。

解决方法 #

方法1：使用计算属性（推荐） #

计算属性会自动响应name的变化，实时更新isNameSet的值，是Vue中处理这类依赖关系的标准方案：

var vm = new Vue({
    el: "#my-id",
    data: {
        name: "yahya"
    },
    computed: {
        isNameSet() {
            return !!this.name;
        }
    }
})

方法2：实例创建后手动赋值 #

如果不需要自动响应name的变化，可以在实例初始化完成后手动赋值：

var vm = new Vue({
    el: "#my-id",
    data: {
        name: "yahya",
        isNameSet: false // 先设置默认值
    }
})
// 实例创建后赋值
vm.isNameSet = !!vm.name;

内容的提问来源于stack exchange，提问作者Yahya Rechaki