Vue笔记，持续更新

get element time

在mounted函数里，通过this.$ref和document.querySelector都访问不了dom

vue文档里关于ref的触发时机说明：

cn.vuejs.org/v2/api/inde…

关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

{
    mounted() {
        // get ele via ref
        this.$refs.xxx   // fail 
        
        // get ele via document.querySelecor
        document.querySelector('.xxx')
    }
}
复制代码

route update hook

vue-router@^2.2里，新增了beforeRouteUpdate事件钩子，可以用来处理当前页面路由变化时的一些变化。 当然也可以watch $route对象，来达到同样的效果

那他们有什么不同的地方呢？看下面的Demo

// 假设页面路由模式是hash，当前路径是#/path/to?state=pending
// 当按下button时，会触发当前路由参数的改变
new Vue({
    template: `
        <div>
            <button @click="click">Push State</button>
        </div>
    `,
    beforeRouteUpdate(to, form, next){
        // 此时这里this.$route还是之前的route
        console.log(this.$route.query.state) // pending
        next()
    },
    watch: {
        // $route的变化，可能跳到其他页面，也可能是其他页面跳到此页面
        // 一般我们只需要设置其他页面跳到此页面就行了。
        // 对于使用了<keep-alive>组件的，直接使用activated钩子就行了
        $route(to, from) {
            // watch $route回调里的$route，已是更新后的$route
            console.log(this.$route.query.state)  // completed
        }
    },
    methods: {
        click() {
            this.$router.push(`/path/to?state=completed`)
        }
    }
})
复制代码

vue-loader deep selector

vue-loader@~12.2.2以上才支持deep selector

而这之前，如果要支持deep selector，只能使用style global(不带scoped属性即可)

获取嵌套组件

let vm = new Vue()
// 取$route匹配的最后一个$route的instances.default
vm.$route.matched[vm.$route.matched.length - 1].instances.default
复制代码

---

打个广告

公司现在急招前端开发，坐标深圳南山，有兴趣的可以看这里，直接把简历发我邮箱吧。teal.yao@corp.to8to.com