vue中关于this.refs为空出现原因及分析

<!-- ref 写在标签上时：this.$refs.名字  获取的是标签对应的dom元素
     ref 写在组件上时：这时候获取到的是 子组件（比如counter）的引用-->
    <div id="root">
        <!-- ref = 'hello'： 给div 起了一个引用的名字 hello -->
        <div
            ref = 'hello'
            @click = "handleClick">
            laugh yourself
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#root',
            methods: {
                handleClick: function() {
                    //this.$refs : 获取整个Vue实例中所有的引用 然后再找到hello这个引用 指向div那个dom节点
                    //console.log(this.$refs.hello)
                    alert(this.$refs.hello.innerHTML)
                }
            }
        })
    </script>

<!-- ref 写在标签上时：this.$refs.名字  获取的是标签对应的dom元素
     ref 写在组件上时：这时候获取到的是 子组件（比如counter）的引用-->
    <div id="root">
        <!-- 子组件触发了事件 这里父组件(模板区里面)监听该事件 调用handleChange方法 
                                    因此handleChange方法定义在父组件的methods里面-->
        <counter ref="one" @change="handleChange"></counter>
        <counter ref="two" @change="handleChange"></counter>
        <div>{{total}}</div>
    </div>
    <script>
        Vue.component('counter', {
            template: '<div @click="handleClick"> {{number}} </div>',
            data: function() {
                return {
                    number: 0
                }
            },
            methods: {
                handleClick: function() {
                    this.number ++
                    //子组件向父组件传值  子组件被点击的时候 number+1  同时告诉外面 也即是触发一个事件
                    this.$emit('change')
                }
            },
        })
        var vm = new Vue({
            el: '#root',
            data: {
                total: 0
            },
            methods: {
                handleChange: function() {
                    //在此方法中计算两个数量的和  通过this.$refs.引用名字 获取两个子组件的引用
                    this.total = this.$refs.one.number +
                                    this.$refs.two.number
                }
            }
        })
    </script>