problem:vueのデータ変更でビュー更新の問題はトリガーされません

前言:
データ変更後、vueはdomをどのようにレンダリングしますか?
実際のシーン:
データを更新してから、スクロールバーの位置を設定するのはなぜ無効ですか?
非表示の要素を表示状態に設定した後、要素の状態を読み込んで読み込めないのはなぜですか?
オブジェクト/配列の値が変更され、ページに最新の値が更新されませんか?
 
vueのデータ変更についてビューの更新をトリガーしない現象:
知っておくべき細部
vueでdataで定義された変数は、vueがその変化を傍受することができます.
vueでは、オブジェクトのプロパティの追加、変更、削除を傍受できません.
vueの配列に対して、下付きで変更した属性値は応答できません(ビュー更新をトリガーできません).
   ˙上記のソリューションについて
1.オブジェクトに属性を追加し、$set(obj,propname,propvalue)またはObject.assign({},obj,{...})追加
2、配列内のオブジェクト属性を変更します.例えば、dataに定義された配列(応答式変数)の値(オブジェクトタイプの値)に属性を追加します.
このプロパティは、ポイントまたは[]で直接追加されます.このプロパティ値が変更された後もビューの更新をトリガーできます.
3、配列については、配列にpush、shift、spliceなどの方法で配列に値を追加/削除し、ビュー更新をトリガすることができるが、下付きで配列に値を追加することは、ビュー更新をトリガすることはできない.
     
もう1つのケースは、変数が応答的なのか、ビューの更新がトリガーされていないのかです.vueでのデータの更新は非同期なので、データが変化した後にdomをタイムリーに更新したい場合はthis.$nextTick()にあります.
ここでは、データが変更されてもビューの更新がトリガーされない例を示します.
コンポーネント間で値が渡された場合、データはビュー更新の問題をトリガーしません.
1、入力ボックスの文字数を制限する機能.

2、keyupは入力を傍受し、文字列が32に達すると、32後の文字列を切り取ります.コンポーネント内のpropsの変数を直接変更することはできないので、親コンポーネントにイベントを投げつけるかsync識別子で親コンポーネントの変数の値を変更してからサブコンポーネントに伝えるしかありません.サブアセンブリでは、親アセンブリの変数の値は受け入れられますが、レンダリングされません.

  limitLength(e) {
        const input = e.target;
        const value = input.value
        const split = value.split('');
        const map = split.map((s, i) => {
            return (value.charCodeAt(i) >= 0 && value.charCodeAt(i) <= 128) ? 1 : 2;
        });
        let n = 0;
        const charLength = map.length > 0 && map.reduce((accumulator, currentValue, index) => {    
            const count = accumulator + currentValue;
            if (count === 31 || count === 32) {
                n = index;
            }
            if (count > 32) {        this.$emit('update:username',split.slice(0, n+1).join('') )
                this.$emit("setUserName",split.slice(0, n+1).join(''));
            }    
            return count
        });
    
    },

ここでのレンダリングなしとvueの値の変更は非同期レンダリングに関連しています.
ソリューション:
1、inputの値はv-modelによって値をバインドし、v-modelはvalue賦値とoninputイベントの集合に相当する.

        <input 
        class="remark-modify" 
        maxlength="32"  
        type="text" 
        v-model="name"
        @blur="saveRemark" 
        @keypress.enter="saveRemark" 
        @keyup="limitLength"
        autofocus v-else>

2、computedはname変数を定義し、入力ボックスに内容を表示し、set()とget()メソッドを定義することによって値と読み取り値を修正する(propsでusernameを定義する)

computed: {
	  name: {
		set(value) {	    
		  this.$emit("setUserName", value);
		},
		get(value) {
			
                    return this.username
		}
	  }
  },

 
3、文字数を制限する方法では、内容を切り取った後、新しい値をname変数に直接割り当てると、nameのsetメソッドがトリガーされます

limitLength(e) {
        const input = e.target;
        const value = input.value
        const split = value.split('');
        const map = split.map((s, i) => {
            return (value.charCodeAt(i) >= 0 && value.charCodeAt(i) <= 128) ? 1 : 2;
        });
        let n = 0;
        const charLength = map.length > 0 && map.reduce((accumulator, currentValue, index) => {    
            const count = accumulator + currentValue;
            if (count === 31 || count === 32) {
                n = index;
            }
            if (count > 32) {        
                this.name = split.slice(0, n+1).join('')    
                // this.$emit('update:username',split.slice(0, n+1).join('') )
                // this.$emit("setUserName",split.slice(0, n+1).join(''));
            }    
            return count
        });

 
vueシリーズのログでは、次のようにまとめます.
1、vueにおける非同期レンダリングデータの問題
2、computed定義変数、変数にset/getメソッドと定義されていない違いを定義する
3、vueにおける応答式データメカニズム
4、javascriptの定義対象属性のObject.definedProperty()
　　
 
　
転載先:https://www.cnblogs.com/yy95/p/9872534.html