vue的一些方法总结

Vue.nextTick()

作用：立即获取更新后的DOM

<div>
    <button
        id="firstBtn"
        ref="aa"
        @click="testClick()">{{ testMsg }}</button>
</div>

使用了nextTick以后

methods: {
    testClick() {
        this.testMsg = '修改后的值';
        this.$nextTick(()=>{
            console.log(this.$refs.aa.innerHTML); //页面和控制台都打印的是 修改后的值
        });
        console.log(this.$refs.aa.innerHTML); //页面变了 ，但控制台打印的是 原始值
    },

使用场景：更改数据后当你想立即使用js操作新的视图的时候需要使用它

---

Vue.set的使用

调用方法：Vue.set(target，key，value)
target:要更改的数据源（可以是对象或者数组）
key：要更改的具体数据
value：重新赋的值

使用场景：当我们需要动态改变数据的时候

data(){
    return {
    items: [
        {message: 'Test one', id: '1'},
        {message: 'Test two', id: '2'},
        {message: 'Test three', id: '3'}
    ],
}
}

修改数据

this.$set(this.items, 0, {message: 'Change Test', id: '10'});

新增数据

this.$set(this.items, itemLen, {message: 'Test add attr', id: itemLen});

---

vue 回车触发聚焦 @keyup.enter.native

<el-form
    :inline="true"
    :model="dataForm"
    @submit.native.prevent
    @keyup.enter.native="search()">
</el-from>

methods: {
    // 查询
    search() {
        this.dataList.map(item=>{
            if (item.vwSubGroupName === this.dataForm.planConfigName) {
                this.searchVwSubGroup.push(item);
            }
        });
        // this.dataForm.planConfigName
        this.dataList = this.searchVwSubGroup;
        // 改变总条数
        this.totalPage = this.dataList.length;
    },

@keyup.native.enter 第一次触发时，会刷新页面
原因：事件包裹在form表单中，enter事件默认触发了表单的提交，导致页面刷新
解决：在el-form标签中加上 @submit.native.prevent，阻止表单的默认行为

---

vue watch里的handler函数

简单用法：

watch:{
    firstName:function (newV,oldV) {
        console.log("firstName值发生了变化",newV,oldV)
    },
}

handler函数：

watch: {
    visible: {
        handler(val) {
            if (!val) {
                this.organizationValue = '';
                this.materialList = [];
            } else {
            }
        }
    }

},

handler作用：
将处理逻辑抽象出去了，以method的方式被复用
给定义下面两个重要属性留出了编写位置

deep属性 （默认FALSE）
当watch的是一个Object类型的数据，如果这个对象内部的某个值发生了改变，并不会触发watch动作，为解决这一问题，就要使用deep属性：

watch:{
    obj:{
        handler:'doSomething',
        deep:true
    }
}

immediate属性 （立即执行）
watch 的handler函数通常情况下只有在监听的属性发生改变时才会触发。
但有些时候，我们希望在组件创建后，或者说watch被声明和绑定的时候，立刻执行一次handler函数，这就需要使用immediate属性了

watch:{
    obj:{
        handler:'doSomething',
        deep:true,
        immediate:true
    }
}