者：Michael Thiessen

譯者：前端小智

來源：hackernoon

有時候，依賴 Vue 響應方式來更新數據是不夠的，相反，我們需要手動重新渲染組件來更新數據。或者，我們可能只想拋開當前的DOM，重新開始。那么，如何讓Vue以正確的方式重新呈現組件呢？

強制 Vue 重新渲染組件的最佳方法是在組件上設置:key。當我們需要重新渲染組件時，只需更 key 的值，Vue 就會重新渲染組件。

這是一個非常簡單的解決方案。

當然，你可能會對其他方式會更感興趣：

• 簡單粗暴的方式：重新加載整個頁面
• 不妥的方式：使用 v-if
• 較好的方法：使用Vue的內置forceUpdate方法
• 最好的方法：在組件上進行 key 更改

簡單粗暴的方式：重新加載整個頁面

這相當于每次你想關閉應用程序時都要重新啟動你的電腦。

這種方式或許有用，但這是一個非常糟糕的解決方案，不要這樣做，我們來看看更好的方法。

不妥的方式：使用 `v-if`

v-if指令，該指令僅在組件為true時才渲染。如果為false，則該組件在DOM中不存在。

來看看，v-if 是怎么工作的，在template中，添加v-if指令：

<template>??
  <my-component?v-if="renderComponent"?/>
</template>

在script 中，使用nextTick的方法

<script>??export?default?{????data()?{??????return?{????????renderComponent:?true,??????};????},????methods:?{??????forceRerender()?{????????//?從?DOM?中刪除?my-component?組件????????this.renderComponent?=?false;????????this.$nextTick(()?=>?{??????????//?在?DOM?中添加?my-component?組件??????????this.renderComponent?=?true;????????});??????}????}??};</script>

上面的過程大致如下：

1. 剛開始 renderComponent設置為true，因此渲染 my-component 組件
2. 當我們調用forceRerender時，我們立即將renderComponent設置為false
3. 我們停止渲染my-component，因為v-if指令現在計算結果為false
4. 在nextTick方法中將renderComponent設置回true
5. 當v-if指令的計算結果為true時，再次渲染my-component

在這個過程中，有兩個部分比較重要

首先，我們必須等到nextTick，否則我們不會看到任何變化。

在Vue中，一個 tick 是一個DOM更新周期。Vue將收集在同一 tick 中進行的所有更新，在 tick 結束時，它將根據這些更新來渲染 DOM 中的內容。如果我們不等到next tick，我們對renderComponent的更新就會自動取消，什么也不會改變。

其次，當我們第二次渲染時，Vue將創建一個全新的組件。Vue 將銷毀第一個，并創建一個新的，這意味著我們的新my-component將像正常情況一樣經歷其所有生命周期-created，mounted等。

另外，nextTick 可以與 promise 一起使用:

forceRerender()?{??
  //?從?DOM?中刪除?my-component?組件??
  this.renderComponent?=?false;??
  this.$nextTick().then(()?=>?{????
    this.renderComponent?=?true;??
  });
}

不過，這并不是一個很好的解決方案，所以，讓我們做 Vue 想讓我們做的

較好的方法：forceUpdate 方法

這是解決這個問題的兩種最佳方法之一，這兩種方法都得到了Vue的官方支持。

通常情況下，Vue 會通過更新視圖來響應依賴項中的更改。然而，當我們調用forceUpdate時，也可以強制執行更新，即使所有依賴項實際上都沒有改變。

下面是大多數人使用這種方法時所犯的最大錯誤。

如果 Vue 在事情發生變化時自動更新，為什么我們需要強制更新呢？

原因是有時候 Vue 的響應系統會讓人感到困惑，我們認為Vue會對某個屬性或變量的變化做出響應，但實際上并不是這樣。在某些情況下，Vue的響應系統根本檢測不到任何變化。

所以就像上一個方法，如果你需要這個來重新渲染你的組件，可能有一個更好的方法。

有兩種不同的方法可以在組件實例本身和全局調用forceUpdate：

//?全局
import?Vue?from?'vue';Vue.forceUpdate();
//?使用組件實例
export?default?{??
  methods:?{????
    methodThatForcesUpdate()?{??????
      //?...??????
      this.$forceUpdate();??????
      //?...????
    }??
 }}

重要提示：這不會更新任何計算屬性，調用forceUpdate僅僅強制重新渲染視圖。

最好的方法：在組件上進行 `key` 更改

在許多情況下，我們需要重新渲染組件。

要正確地做到這一點，我們將提供一個key屬性，以便 Vue 知道特定的組件與特定的數據片段相關聯。如果key保持不變，則不會更改組件，但是如果key發生更改，Vue 就會知道應該刪除舊組件并創建新組件。

正是我們需要的！

但是首先，我們需要繞一小段路來理解為什么在Vue中使用key。

為什么我們需要在 Vue 中使用 key

一旦你理解了這一點，那么這是了解如何以正確方式強制重新渲染的很小的一步。

假設我們要渲染具有以下一項或多項內容的組件列表：

• 有本地的狀態
• 某種初始化過程，通常在created或mounted鉤子中
• 通過jQuery或普通api進行無響應的DOM操作

如果你對該列表進行排序或以任何其他方式對其進行更新，則需要重新渲染列表的某些部分。但是，不會希望重新渲染列表中的所有內容，而只是重新渲染已更改的內容。

為了幫助 Vue 跟蹤已更改和未更改的內容，我們提供了一個key屬性。在這里使用數組的索引，因為索引沒有綁定到列表中的特定對象。

const?people?=?[??
  {?name:?'Evan',?age:?34?},??
  {?name:?'Sarah',?age:?98?},??
  {?name:?'James',?age:?45?}
];

如果我們使用索引將其渲染出來，則會得到以下結果：

<ul>??
  <li?v-for="(person,?index)?in?people"?:key="index">????
    {{?person.name?}}?-?{{?index?}}??
      </li>
</ul>
//?OutputsEvan?-?0Sarah?-?1James?-?2

如果刪除Sarah，得到：

Evan?-?0James?-?1

與James關聯的索引被更改，即使James仍然是James。James會被重新渲染，這并不是我們希望的。

所以這里，我們可以使用唯一的 id 來作為 key

const?people?=?[??
  {?id:?'this-is-an-id',?name:?'Evan',?age:?34?},??
  {?id:?'unique-id',?name:?'Sarah',?age:?98?},??
  {?id:?'another-unique-id',?name:?'James',?age:?45?},
];
<ul>??
  <li?v-for="person?in?people"?:key="person.id">????
    {{?person.name?}}?-?{{?person.id?}}??
  </li>
</ul>

在我們從列表中刪除Sarah之前，Vue刪除了Sarah和James的組件，然后為James創建了一個新組件?，F在，Vue知道它可以為Evan和James保留這兩個組件，它所要做的就是刪除Sarah的。

如果我們向列表中添加一個person，Vue 還知道可以保留所有現有的組件，并且只需要創建一個新組件并將其插入正確的位置。這是非常有用的，當我們有更復雜的組件，它們有自己的狀態，有初始化邏輯，或者做任何類型的DOM操作時，這對我們很有幫助。

所以接下來看看，如果使用最好的方法來重新渲染組件。

更改 key 以強制重新渲染組件

最后，這是強制Vue重新渲染組件的最佳方法（我認為）。

我們可以采用這種將key分配給子組件的策略，但是每次想重新渲染組件時，只需更新該key即可。

這是一個非?；镜姆椒?/p>

<template>??
  <component-to-re-render?:key="componentKey"?/>
</template>
export?default?{?
  data()?{????
    return?{??????
      componentKey:?0,????
    };??
  },??
  methods:?{????
    forceRerender()?{??????
      this.componentKey?+=?1;??????
    }??
  }
}

每次forceRerender被調用時，我們的componentKey都會改變。當這種情況發生時，Vue將知道它必須銷毀組件并創建一個新組件。我們得到的是一個子組件，它將重新初始化自身并“重置”其狀態。

如果確實需要重新渲染某些內容，請選擇key更改方法而不是其他方法。

原文：https://hackernoon.com/the-correct-way-to-force-vue-to-re-render-a-component-bde2caae34ad

生JS事件綁定例題

1、開關燈示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            height: 400px;
            width: 400px;
            border-radius: 50%;
        }
        .bg_green{background-color: green}
        .bg_red{background-color: red}
    </style>
</head>
<body>
    <div id="d1" class="c1 bg_red bg_green"></div>
    <button id="d2">變色</button>
<script>
    let btnEle=document.getElementById('d2')
    let divEle=document.getElementById('d1')
    btnEle.onclick=function () {          //點擊時調用事件句柄
        divEle.classList.toggle('bg_red')   //有則刪除，無則添加
    }
</script>
</body>
</html>

2、input框獲取焦點示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" value="hello world" id="d1">

<script>
    let iEle=document.getElementById('d1')  // 點擊了后執行的操作（獲取焦點）
    iEle.onfocus=function (){
        iEle.value=''  // 重新賦值為空
    }
    iEle.onblur=function (){  // 鼠標點擊了其他地方執行的操作（移除焦點）
        iEle.value='goodbye'
    }
</script>
</body>
</html>

3、input框實時刷新時間實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="d1" style="display: block;height: 50px;width:200px">
<button id="d2">開始</button>
<button id="d3">結束</button>

<script>
    //4、創建一個變量t，用來存儲定時器
    let t=null
    //1、 把要操作的標簽生成對象
    let inputEle=document.getElementById('d1')
    let starEle=document.getElementById('d2')
    let endEle=document.getElementById('d3')
    //2、定義一個函數用于展示實時時間
    function showTime(){
        let time=new Date();  //  生成一個時間對象
        inputEle.value=time.toLocaleString()  //獲取當前時間，并賦值給input標簽
    }
    //3、給頁面上的按鈕綁定功能，一個開始，一個結束
    starEle.onclick=function (){
        if (!t){
            t=setInterval(showTime,1000)    //每點擊一下就會生成一個定時器
        }
    }
    endEle.onclick=function (){
        clearInterval(t)    //只能清除一個定時器
        t=null
    }
</script>
</body>
</html>

4、省市聯動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="d1" >
    <option value="---請選擇---" selected disabled>---請選擇---</option>
</select>
<select name="" id="d2"></select>

<script>
    let proEle=document.getElementById('d1')
    let cityEle=document.getElementById('d2')
    //1、先模擬省市數據
    data={
        '江西':['南昌','九江','贛州','上饒'],
        '浙江':['杭州','義烏','紹興','嘉興'],
        '江蘇':['南京','蘇州','泰州','南通'],
        '廣東':['廣州','深圳','惠州','清遠']
    };
    //2、for循獲取到省
    for (let key in data){
        //2.1 將省信息做成一個個option標簽，并添加到第一個select框中
        //1 創建option框
        let opEle=document.createElement('option')
        //2 設置value
        opEle.value=key
        //3 設置文本
        opEle.innerText=key
        //4 添加到第一個select中
        proEle.appendChild(opEle)
    }
    //3、設置文本域變化事件，使得再更換省的時候可以更新市
    proEle.onchange=function (){
        //先清空市select中所有的option
        cityEle.innerHTML=''
        //先獲取到用戶選擇的省
        let getPro=proEle.value
        //獲取對應的市信息
        let getCity=data[getPro]
        //添加默認選擇標簽
        let oppEle=document.createElement('option')
        oppEle.innerText='-請選擇-'
        oppEle.setAttribute('selected','selected')
        oppEle.setAttribute('disabled','disabled')
        cityEle.appendChild(oppEle)
        //for循環所有的市，渲染到第二個select中
        for(let i=0;i<getCity.length;i++){
            //拿到市名
            let city=getCity[i]
            //創建標簽
            let opEle=document.createElement('option')
            //設置文本
            opEle.innerText=city
            //設置值
            opEle.value=city
            //添加到第二個select中
            cityEle.appendChild(opEle)
        }
    }

</script>
</body>
</html>

jQuery

jQuery 是一個快速、小巧且功能強大的 JavaScript 庫。它通過簡化 JavaScript 編程，使開發人員能夠更輕松地操作 HTML 文檔、處理事件、執行動畫效果以及處理 AJAX 請求等。

jQuery基本語法：

jQuery（選擇器）.action（）
可以簡寫：jQuery()===$()

基本選擇器：

1. 元素選擇器：使用元素名稱選擇 HTML 元素。例如：`$("p")` 會選擇所有的 `<p>` 元素。

2. ID 選擇器：使用元素的 ID 屬性選擇指定的元素。例如：`$("#myElement")` 會選擇具有 ID 屬性為 "myElement" 的元素。

3. 類選擇器：使用元素的類名選擇指定的元素。例如：`$(".myClass")` 會選擇具有類名為 "myClass" 的元素。

4.屬性選擇器：使用元素的屬性選擇指定的元素。例如：$("[name='myName']") 會選擇具有 name 屬性值為 "myName" 的元素。

通過jQuery選擇器獲取到的對象都是jQuery對象，如需使用JavaScript代碼對其進行操作的話，則需要轉換成標簽對象。

$("#myElement")[0]	//轉成標簽對象

同樣，標簽對象也可轉成jQuery對象：

$(document.getElementByid('#myElement')) //轉成jQuery對象

組合分組嵌套選擇器：

jQuery也支持組合選擇器：

$('div#d1')	//選擇具有 id 屬性為 "d1" 的 <div> 元素。
$('div.c1')	//選擇具有 class 屬性為 "c1" 的 <div> 元素。
... ...
$('div span')	//后代選擇器，用于選擇 <div> 元素內的所有 <span> 元素。
$('div>span')	//子元素選擇器，用于選擇 <div> 元素的直接子元素中的 <span> 元素。
$('div+span')	//相鄰元素選擇器，用于選擇緊接在 <div> 元素后面的第一個 <span> 元素。
$('div~span')	//兄弟元素選擇器，用于選擇所有在 <div> 元素后出現的同級別的 <span> 元素。

基本篩選器：

在jQuery中，篩選器可以根據不同的條件來選擇匹配的元素，從而實現對元素的精確控制和操作。

jQuery提供了許多基本篩選器，用于選擇匹配指定條件的元素。以下是一些常用的基本篩選器：

- `:first`：選擇第一個匹配的元素。

- `:last`：選擇最后一個匹配的元素。

- `:even`：選擇索引為偶數的元素（從0開始計數）。

- `:odd`：選擇索引為奇數的元素（從0開始計數）。

- `:eq(index)`：選擇索引為指定值的元素。

- `:gt(index)`：選擇索引大于指定值的元素。

- `:lt(index)`：選擇索引小于指定值的元素。

- `:header`：選擇所有標題元素（如`<h1>`、`<h2>`等）。

- `:not(selector)`：選擇不匹配給定選擇器的元素。

- `:has(selector)`：選擇包含匹配給定選擇器的元素。

- `:contains(text)`：選擇包含指定文本內容的元素。

$('ul li') #ul下面的所有li子標簽
$('ul li:first') #ul下面的第一個li子標簽 $('ul li').first()
$('ul li:last') #ul下面的最后一個li子標簽 $('ul li').last()
$('ul li:eq(2)') #放索引，根據索引取值
$('ul li:even') #偶數索引，0包含在內
$('ul li:odd') #奇數索引
$('ul li:gt(2)') #大于索引
$('ul li:lt(2)') #小于索引
$('div:has("p")') #選舉出包含一個標簽，或多個標簽在內的標簽（父級）
$('ul li:not("#d1")') # 移除所有滿足條件的標簽

這些基本篩選器可以與其他選擇器和方法組合使用，以便更精確地選擇和操作網頁中的元素。

表單篩選器：

篩選器方法：

知道大家有沒有這樣的需求，用戶自定義頁面布局，把布局的html標簽代碼保存到數據庫中，預覽的時候根據保存的值，把標簽代碼渲染到頁面中，當然普通JS / jQuery肯定沒問題，下面小編介紹如何用Vue來實現。

在VUE中，把標準html標簽輸出到網頁中利用v-html可以實現，但是自定義組件的標簽是無法正確輸出我們想要的結果，下面我介紹一種方法來實現這種需求。

1. 首先創建一個自定義的組件，包含一個輸入參數；

<template>
    <div>
        測試組件 {{ dataId }}
    </div>
</template>
<script>
export default {
    props: {
        dataId: {
            type: String,
            default: ''
        }
    }
}

2. 建核心渲染標簽組件，并把剛剛創建的自定義組件引入進去；

<script>
import Vue from "vue";
// 1.引入組件
var testCom=()=> import("./test-com");

export default {
  props: {
    html: {
      type: String,
      required: true
    }
  },

  render(h) {
    if (!this.html) {
      return false;
    }
    const com=Vue.extend({
      components: {
        "test-com": testCom
      },
      template: this.html
    });
    return h(com);
  }
};
</script>

3. 創建測試組件測試

<template>
    <div>
        <comrender :html="htmltemplate" />
    </div>
</template>
<script>
import comrender from './render'

export default {
  components: {
    comrender: comrender
  },
  data() {
    return {
        htmltemplate: '<test-com dataId="001"></test-com>'
    }
  }
};
</script>

大功告成（可自行測試，如果想要完整源碼可以私信我哦）！目前自定義組件可以通過字符串來渲染，并且可以傳遞簡單的一個字符串參數。但是如果想要傳遞一個對象參數，目前是不行的，如果有此需求等待小編下次更新！