当前位置：首页 > article >正文

关于 API

article 2024/10/28 13:31:29

关于 API

$set

问法：有没有遇到过数据更新了但视图没有更新的情况？

<template>
    <div>
        {{arr}}
        <button @click="btn"></button>
    </div>
</template>

<script>
export default {
    name:"Home"
    data(){
        return{
            arr:[0,1,2]
        }
    },
    methods: {
        btn(){
            // this.arr[1]="xxx"; // 这种改法，log 出来的数据改变了，但是视图上的数据没有改变
            this.$set(this.arr,1,'xxx') // 这种改法在 log 和试图上数据都改变了  三个参数分别是：操作对象、下标或者属性名、更改的值
            console.log(this.arr);
        }
    },
}
</script>

this.$set(target,key, 修改后的值）

$nextTick

this.$nextTick 返回的参数（函数）是一个异步的。
功能：获取更新后的 dom 。
源码：

$nextTick(callback){
    return Promise.resolve().then(()=>{
        callback();
    })
}

获取更新后的 dom 的两种方法：

异步获取
（比如在 created 周期中）使用 Vue 中自带的 API ，this.$nextTick，其原理是返回一个 Promise.then() 的内容，让 callback 中的内容异步执行。

$refs

用来获取 dom 。

$el

获取当前组件的根节点。

$data

获取其当前组件的 data 数据。

$children

获取当前组件的全部子组件（以数组的形式返回）。

$parent

获取当前组件的父组件，如果找不到则返回自身。

$root

获取根组件。

data 定义数据

问法：Vue2 中数据是定义在 data 中的 return 里的，如果定义在 return 外有什么区别？

定义在 return 外的数据不能被修改，不会实现双向绑定，没有 getter 和 setter，而 return 内的数据会被 getter 和 setter 劫持，所以可以实现双向绑定。

但是如果同一个事件同时修改了 return 内和 return 外的两种数据，那么都将被修改。
这是因为双向绑定的数据被 getter 和 setter 劫持，通知 Vue 对象进行数据更新，所以 return 外的数据也得到了更新。

computed 计算属性

问法：通过 computed 计算属性获得的值可以修改吗？

可以，需要在计算属性中使用 getter 和 setter 的写法。
getter 中包含的是一般写法中的 return 语句。
setter 中传入一个要修改的值作为参数，包含的是将变量赋值给数据的操作。

export default {
    name: 'HomeView',
    data () {
        return {
            str: 'abc'
        }
    },
    computed: {
        // 这是一般的写法
        // changeStr (){
        //     return this.str.slice(-1)
        // }

        // 这是 getter 和 setter 的写法
        changeStr: {
            get(){
                return this.str.slice(-1)
            },
            set( val ){
                this.str = val,
            }
        }
    },
    methods: {
        btn() {
            this.str = 'xxxx';
            console.log( this.changeStr )
        }
    }
}

问法：当前 v-model 绑定的值是 computed 来的，那么可以修改吗？

可以，使用 getter 和 setter 写法就可以。

watch

    watch:{
        obj:{
            handler(oldVal, newVal) {
                console.log(oldVal, newVal)
            },
            immediate: true,
            deep: true
        },
        obj2 (oldVal, newVal) {
            console.log(oldVal, newVal)
        }
    }