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

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

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

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

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

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

this.$data，this.$options

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

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

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

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

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

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

場所描述

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

主角登場

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中的所有值 當然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>