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

关于 API

news 2025/9/16 4:07:05

关于 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)}}