vue恢復(fù)初始數(shù)據(jù)this.$data,this.$options.data()解析

更新時(shí)間：2022年03月03日 10:55:22 作者：阡ゼ陌

這篇文章主要介紹了vue恢復(fù)初始數(shù)據(jù)this.$data，this.$options.data()解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue恢復(fù)初始數(shù)據(jù)this.$data,this.$options.data()

vue恢復(fù)初始數(shù)據(jù)

在vue開放中我們會(huì)遇到一個(gè)頁面或者一個(gè)彈窗讓他恢復(fù)到原始數(shù)據(jù)的情況，如果數(shù)據(jù)不多我們可以重設(shè)賦值一下，但數(shù)據(jù)較多的情況下會(huì)比較麻煩，這時(shí)候可以用到

this.$data，this.$options

this.$options.data()這個(gè)是vue原始的數(shù)據(jù)，就是你頁面剛加載時(shí)的data
this.$data這個(gè)是現(xiàn)在階段的vue數(shù)據(jù)，就是你改變data的數(shù)據(jù)

下面是一個(gè)彈窗的數(shù)據(jù)，在彈窗關(guān)閉時(shí)恢復(fù)數(shù)據(jù)，這里使用Object.assign將原始數(shù)據(jù)和現(xiàn)在的數(shù)據(jù)融合，會(huì)將改變的數(shù)據(jù)重置到初始狀態(tài)

watch: {
? ? ShowModal(val) {
? ? ? if (!val) {
? ? ? ? Object.assign(this.$data, this.$options.data())
? ? ? }
? ? }
? }

如果只想讓一個(gè)數(shù)據(jù)恢復(fù)到以前

this.base = this.$options.data().base

this.$options.data()和this.$data你知多少

場(chǎng)所描述

如何獲取vue-data中的所有值？
如何獲取vue-data中的某一個(gè)值？
如何獲取vue-data中的初始值？
如何設(shè)置data中的值位初始值？

主角登場(chǎng)

this.options.data() 和 this.data

<template>
? ? <div>
? ? ? ? <button @click="gotos">改變</button>
? ? ? ? <button @click="obtain">獲取改變后的值</button>
? ? ? ? <button @click="inithander">獲取初始狀態(tài)下的值</button>
? ? ? ? <button @click="reset">重置</button>
? ? </div>
</template>
<script>
export default {
? ? data(){
? ? ? ? return{
? ? ? ? ? ? // https://www.jianshu.com/p/05697682a46f
? ? ? ? ? ? obj:{
? ? ? ? ? ? ? ? name:'張三',
? ? ? ? ? ? ? ? age:'李四',
? ? ? ? ? ? ? ? sex:'男'
? ? ? ? ? ? },
? ? ? ? ? ? subjective:{
? ? ? ? ? ? ? ? info:'ok'
? ? ? ? ? ? }
? ? ? ? }
? ? },
? ? methods:{
? ? ? ? gotos(){
? ? ? ? ? ? this.obj.sex='我改變了性別'
? ? ? ? },
? ? ? ? //獲取vue中data中的所有值 當(dāng)然data中的值也有可能是被改變了的
? ? ? ? obtain(){
? ? ? ? ? ? console.log('vue中data中的所有值',this.$data);
? ? ? ? },
? ? ? ? // 獲取組件下初始狀態(tài)下的值；就是你在data中最初寫的值
? ? ? ? inithander(){
? ? ? ? ? ? console.log('初始狀態(tài)下的值',this.$options.data());
? ? ? ? },
? ? ? ? // 重置值
? ? ? ? reset(){
? ? ? ? ? ? Object.assign(this.$data.obj,{name:'',age:'', sex:''});
? ? ? ? ? ? // 還可以使用 ? Object.assign(this.$data.obj,this.$options.data().obj); //前提是obj的值是空
? ? ? ? ? ? console.log('重置', this.obj )
? ? ? ? }
? ? }
}
</script>