VueのnextTick

DOMの変更により、イベントがトリガーされます.イベントは同期して実行されます.
データの更新は、すぐにビューの更新をトリガーしません.VueではDOMの変動は非同期である.
 
データ更新後のdomオブジェクトを取得したい場合は、操作を実行します.初期化はmountedに書くことができ、nextTickというapiに書くことができます.
Vue.nextTick(callback、コンテキスト環境のthisを実行)--2つのパラメータを受信
 
Vue.nexttickには3つの重要な変数があります.callback(コールバック)pending(コールバックを実行しているかどうか)timefunc(コールバックをトリガーする関数)
 
トリガ方式をtimefuncに伝達する3つの実装:Promise MutationObserver(h 5のapi監視domの変化コールバックは非同期でビューを更新できる)
setTimeout(fn,0)
 
例:

 

        
{{msg}}
        
Message got outside $nextTick: {{msg1}}
        
Message got inside $nextTick: {{msg2}}
        
Message got outside $nextTick: {{msg3}}
        
          Change the Message
        
      
    
    new Vue({
        el: '.app',
        data: {
            msg: 'Hello Vue.',
            msg1: '',
            msg2: '',
            msg3: ''
        },
        methods: {
            changeMsg() {
            this.msg = "Hello word."
            this.msg1 = this.$refs.msgDiv.innerHTML
            this.$nextTick(() => {
                this.msg2 = this.$refs.msgDiv.innerHTML
            })
            this.msg3 = this.$refs.msgDiv.innerHTML
            }
        }
    })</code></pre> 
  <p><a href="https://img.  .com/image/info8/d8eaa903af2d4d478a24d1bcb1f7e4cc.png" target="_blank"><img alt="Vue  nextTick_ 1   " class="has" height="142" src="https://img.  .com/image/info8/d8eaa903af2d4d478a24d1bcb1f7e4cc.png" width="487" style="border:1px solid black;"></a></p> 
  <p>  ：this.$nextTick()          ，                 ，           </p> 
  <p> </p> 
  <p>      https://www.jianshu.com/p/a7550c0e164f</p> 
  <p> </p> 
  <p> </p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1290300867114770432"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">
                    
                     
                

興味があるかもしれません

githubにおける複数のプラットフォームの共存
jackyrong
github

ipアドレスと整数の相互変換(javascript)
alxw4616
JavaScript

読書ノート-jquey+データベース+css
chengxuyuancsdn
html jquery oracle

JAvaSE javaEE javaME==APIダウンロード
Array_06
java

shiro入門学習
cugfy
java Web フレーム

Array削除方法の追加
357029540
js

navigation bar色の変更
張亜雄
IO

unicodeを中国語に変換
adminjun
unicode コード変換

アルファベットで分類:
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
トップページ -
私たちについて -
構内検索 -
Sitemap -
権利侵害苦情
著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com , All Rights Reserved.
京ICP備09083238号