vue钩子函数和computed执行顺序，computed不能操作dom的原因

vue钩子函数和computed执行顺序，computed不能操作dom的原因

• 在项目中遇到这样的问题，在一个组件的computed中使用$refs操作dom，但是会返回undefined，于是修改了一下，在组件的mounted先执行" this.nameDom= ‘this.refs.nameLine’ "，将dom元素赋值到一个data值上，然后在computed中使用this.nameDom，这样就不报错了，之后想到了是不是因为computed和mounted执行顺序问题导致的，这里做一个记录。
• 做了一个demo，结果发现computed是在beforeMount和mounted这两个钩子函数中间执行的。因为vue只能在mounted中操作dom，而computed在mounted之前执行，因此在computed中不能操作dom。如果想要在其他钩子函数或者computed中操作dom，可以通过使用$nextTick()方法操作dom。

结果图如下：

代码如下：

<template>
    <div>
        {{sizeNum}}
    </div>
</template>

<script>
export default {
    data() {
        return {
            citySize: 12
        }
    },

    computed: {
        sizeNum() {
            console.log('computed')
            return this.citySize
        }
    },
 
    beforeCreate() {
        console.log('beforeCreate')
    },
    created() {
        console.log('created')
    },

    beforeMount() {
        console.log('beforeMount')
    },

    mounted() {
        console.log('mounted')
    }
}
</script>