Vue-cli 使用Vue.set可以更新data（字符型）但是无法更新视图

Question

        <div class="title" >
            {{articleType}}
        </div>

<script>
import Vue from 'vue'
export default {
    data() {
        return {
            articleType:'aa',
            subList: {
                special: {
                    name: "特色服务",
                    list: []
                },
                server: {
                    name: "服务资讯",
                    list: []
                },
                about: {
                    name: "关于我们",
                    list: [
                        {
                            dataUri: "centerintro",
                            name: "中心介绍"
                        },
                        {
                            dataUri: "genTeam",
                            name: "全科团队"
                        },
                        {
                            dataUri: "offices",
                            name: "科室介绍"
                        },
                        {
                            dataUri: "culture",
                            name: "文明风貌"
                        }
                    ]
                }
            }
        };
    },
    methods:{
        importArticle:(obj)=>{
            Vue.set(this,'articleType',obj.name)
             console.log(this.articleType);
        
           
        }
    }
};
</script>

如图，触发methods之后，视图没有改变，但是console.log()中是改变后的值。

Answer 1

https://jsfiddle.net/v1un4r4s...

箭头函数不要乱用，

methods:{
        importArticle:(obj)=>{
            Vue.set(this,'articleType',obj.name)
             // 打印出来这个 this 是谁？   window，没有指向当前vue实例
        }
    }

Answer 2

this! this! this!
不要在不该用箭头函数的地方用

Answer 3

这里直接赋值就行了，不需要调用set

Answer 4

是的，直接赋值就可以了，不需要调用set来改变，当添加新属性的时候才需要用set来改变值，因为新增加的属性值没有setter的功能

Answer 5

已解决。
methods使用箭头函数时，this不会指向vue实例。

    methods: {
        importArticle: function(obj) {
            this.articleType = obj.name;
           
        }
    }

附上文档地址：
https://vuejs.org/v2/api/#met...