vue中的dom節(jié)點(diǎn)和window對(duì)象

更新時(shí)間：2022年04月19日 10:33:39 作者：reisaru

這篇文章主要介紹了vue中的dom節(jié)點(diǎn)和window對(duì)象，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

window對(duì)象

首先window對(duì)象是瀏覽器下的默認(rèn)對(duì)象，也就是全局對(duì)象，在沒有明確指向的時(shí)候this指向window。即使切換路由，window對(duì)象里面的屬性和方法依舊會(huì)保留。因此可以在控制欄直接輸入this、window、self都可以直接打印window對(duì)象。window對(duì)象很很多默認(rèn)的方法和屬性。

一切全局變量和方法都是window的屬性和方法，也就是只要沒有指定作用域就會(huì)賦值給window。

<script type="text/javascript">
? ? var name = "chunlynn";
? ? this.sex = "man"; // 這里的this就是隱式的window對(duì)象，相當(dāng)于 sex = "man";
? ? age = 27;
</script>

像這種name、this、age都掛載到了window對(duì)象上，成為了window對(duì)象的屬性。

即使用了框架，比如vue，jQuery，也只是在window下掛載一個(gè)對(duì)象，比如引入jQuery之后就會(huì)在全局掛載一個(gè)$的對(duì)象。還是可以直接通過window調(diào)用全局屬性和方法。

在vue中，因?yàn)橛脀ebpack打包，每個(gè)vue都是單獨(dú)的模塊，所以需要window._this=1 這樣才能夠引入window對(duì)象。而且需要定義在相應(yīng)的script中。這樣就可以在控制臺(tái)直接用_this得到這個(gè)變量。

dom元素

vue中最好不要直接操作dom元素的。因?yàn)関ue是用虛擬dom樹就行插入的。

首先數(shù)據(jù)發(fā)生改變，就會(huì)經(jīng)過 Data 處理，然后Dep會(huì)發(fā)出通知(notify)，告訴 Watcher 有數(shù)據(jù)發(fā)生了變化，接著 Watcher 會(huì)傳達(dá)給渲染函數(shù)跟他說有數(shù)據(jù)變化了，可以渲染視圖了(數(shù)據(jù)驅(qū)動(dòng)視圖)，進(jìn)而渲染函數(shù)執(zhí)行render 方法去更新 VNODE，也就是我們說的虛擬DOM，最后虛擬DOM根據(jù)最優(yōu)算法，去局部更新需要渲染的視圖。

vue中對(duì)dom節(jié)點(diǎn)的操作一般是用ref來完成的。ref 加在普通的元素上，用this.$refs.name 獲取到的是dom元素，和原生的document.get(ID)獲得的dom元素一樣，擁有這個(gè)dom元素的默認(rèn)屬性，像innertext這種，而ref 加在組件上，用this.$refs.name 獲取到的是vue組件實(shí)例，可以使用組件的所有屬性和方法。此時(shí)的結(jié)果是一個(gè)字典序列，可以直接this.$refs.name[用到的屬性]來獲取并且更改。

但是ref的對(duì)象是一個(gè)for循環(huán)的數(shù)組，里面每一個(gè)元素就是vue對(duì)象，也是字典序列。這里因?yàn)閞ef的對(duì)象是一個(gè)li，所以每一個(gè)元素都是li對(duì)象。

ref 需要在dom渲染完成后才會(huì)有，在使用的時(shí)候確保dom已經(jīng)渲染完成。比如在生命周期 mounted(){} 鉤子中調(diào)用，或者在 this.$nextTick(()=>{}) 中調(diào)用。

如果是自定義的組件，甚至可以通過ref調(diào)用emit(A)來實(shí)現(xiàn)@ A="實(shí)現(xiàn)A"的方法。其實(shí)子組件包括第三方組件的api，也就是組件真正實(shí)現(xiàn)的地方定義的方法和屬性，都可以在用ref獲得這個(gè)組件的方法后，自己模擬實(shí)現(xiàn)。

獲取dom節(jié)點(diǎn)的3種方式

vue本來無需操作DOM來更新界面，而且Vue也不推薦我們直接操作DOM，但是我們非要拿到DOM操作DOM怎么辦，那也是有方法的，而且不止一種方法

方式一：（事件源）

<body>
    <div id="aa">
        <input type="button" value="點(diǎn)擊" v-on:click='fun'/>
    </div>
    <script>
        new Vue({
            el:'#aa',
            methods:{
                fun:function(event){
                    console.log(event.target);
                }
            }
        })
    </script>
</body>

輸出結(jié)果

當(dāng)然也可以在方法中傳參進(jìn)去：

<body>
? ? <div id="aa">
? ? ? ? <input type="button" value="點(diǎn)擊" v-on:click='fun($event.target)'/>
? ? </div>
? ? <script>
? ? ? ? new Vue({
? ? ? ? ? ? el:'#aa',
? ? ? ? ? ? methods:{
? ? ? ? ? ? ? ? fun(x){
? ? ? ? ? ? ? ? ? ? console.log(x);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>

方式二：（使用ref）

<body>
? ? <div id="aa">
? ? ? ? <input ref='name' type="button" value="點(diǎn)擊" v-on:click='fun'/>
? ? </div>
? ? <script>
? ? ? ? new Vue({
? ? ? ? ? ? el:'#aa',
? ? ? ? ? ? methods:{
? ? ? ? ? ? ? ? fun(){
? ? ? ? ? ? ? ? ? ? console.log(this.$refs.name);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>

輸出結(jié)果：

方式三：（自定義全局指令）

<body>
? ? <div id="aa">
? ? ? ? <input type="button" value="點(diǎn)擊" v-get/>
? ? </div>
? ? <script>
? ? ? ??
? ? ? ? Vue.directive("get",{
? ? ? ? ? ? bind:function(el){
? ? ? ? ? ? ? ? console.log(el);
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? new Vue({
? ? ? ? ? ? el:'#aa'
? ? ? ? })
? ? </script>
</body>

這里不用點(diǎn)擊，就可以獲取元素，好像在谷歌顯示不友好，