> For the complete documentation index, see [llms.txt](https://yicoding.gitbook.io/vue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yicoding.gitbook.io/vue/chang-yong-zhi-shi-dian.md).

# 实用技巧

## 1.view层更新后进行操作

```
this.$nextTick(() => {

})
```

## 2.watch深度监听

```
data() {
    return {
        info: Object
    }
},
watch: {
    info: {
        handler(val) {
            console.log(val)
        },
        deep: true
    }
}
```

## 3.watch监听对象中的某个属性

```
data() {
    return {
        info: {
            name: ''
        }
    }
},
watch: {
    'info.name': (val) => {
        console.log(val)
    }
}
```

## 4. **阻止路由跳转**

```
data() {
    return {
        isShow: false
    }
},
beforeRouteLeave(to, from, next) {
    if (isShow) {
        next() // 继续执行
    }
}
```

## 5.APP中点APP自带返回按钮时不关闭页面，而是路由回退

```
// app.vue
created() {
    history.pushState(null, null, document.URL)
    window.addEventListener('popstate', () => {
        // history.pushState(null, null, document.URL)
    })
}
```

## 6.vue methods的方法中定义函数

```
data() {
    return {
        test: 0
    }
},
mounted() {
    this.add()
},
methods: {
    add() {
        var that = this
        function test() {
            console.log('test')
            that.test ++
        }
        test()
    }
}
```

## 7.vue方法暴露给外部

```
mounted: function () {
    //此方法绑定到window下面，提供给外部调用
    window['showAdd'] = () => {
      this.showAdd()
    }
}
// 外部调用
window.showAdd()
```

## 8. Vue **不能检测到对象属性的添加或删除**

```
this.$set(object, key, value)
```

## 9. Vue 不能检测以下变动的数组

```
this.$set(arr, index, newValue)
```