欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue TypeScript使用eval函數(shù)遇到的問題

 更新時間:2023年01月27日 10:24:06   作者:jiyanglin  
近幾年前端對 TypeScript的呼聲越來越高,Typescript也成為了前端必備的技能。TypeScript是JS類型的超集,并支持了泛型、類型、命名空間、枚舉等特性,彌補了 JS 在大型應(yīng)用開發(fā)中的不足

正常情況下,項目里不會用eval函數(shù),但是萬一要調(diào)用一個全局的js庫,就需要用eval做些騷操作,這個時候編譯會提示:is strongly discouraged as it poses security risks and may cause issues with minification.

警告是可以忽略,剛開始我也沒當(dāng)回事,有風(fēng)險就有風(fēng)險,可控,我知道自己寫的是啥。但是,今天我改代碼的時候出了問題。就是dev時候正常,但是打包以后,不按照預(yù)期執(zhí)行,編譯出來的代碼就不是我要的邏輯。

問題的關(guān)鍵是:使用eval的函數(shù)不能是全局函數(shù)(需要包裝在一個對象里),然后這個函數(shù)內(nèi)容要簡單,不要里面定義各種變量,然后被eval調(diào)用,免得被編譯時候優(yōu)化掉

簡單的代碼實例問題

上一段簡單的代碼:

<template>
  <div>
    <button @click="btn">測試</button>
  </div>
</template>
<script setup lang="ts">
function myfun(param:number){
    let ret = 0
    eval("ret = param+1")
    return ret;
}
function btn() {
  let ret = myfun(1);
  console.log(ret);
}
</script>

dev運行在瀏覽器點擊按鈕,輸出2,沒毛病

然后打包以后,運行就會是這樣,輸出為NaN

縮成一坨的這個代碼里面,把我的myfun函數(shù)編譯成了這樣,也沒毛病:

function myfun(param){let ret=0;return eval("ret = param+1"),ret }

但是,調(diào)用時候變成了這樣?。。?!

myfun調(diào)用的時候,傳入的參數(shù)哪里去了???

let e=myfun();console.log(e)

因為沒有參數(shù)進入,eval里的param+1結(jié)果就變成了NaN

解決方法

把代碼改成這樣,函數(shù)包裝到一個對象里面:

<template>
  <div>
    <button @click="btn">測試</button>
  </div>
</template>
<script setup lang="ts">
const FunPack = {
  myfun(param:number){
    let ret = 0
    eval("ret = param+1")
    return ret;
  }
}
function btn() {
  let ret = FunPack.myfun(1);
  console.log(ret);
}
</script>

然后打包運行,輸出為2正常:

這個時候調(diào)用變成這樣,myfun的時候傳的參數(shù)正常

let e=FunPack.myfun(1);console.log(e)

問題的原理

感覺上,對于調(diào)用一個不在對象里的函數(shù),typescript編譯時候進行了更多優(yōu)化,對于myfun函數(shù),里面eval函數(shù)那一行沒有類型系統(tǒng),等于沒有,所以編譯時候理解成下面這樣,等于沒有eval那一行。等于param沒有被使用,所以調(diào)用函數(shù)時候,覺得這個參數(shù)沒有用,就給吃了。。。

function myfun(param:number){
    let ret = 0
    return ret;
}

同理,如果myfun里面定義了別的變量,用來給eval使用,但是別的地方?jīng)]有使用,編譯時候,這個變量就會被編譯器認為無效,然后被吃掉,比如myfun定義成這樣,打包運行就會報錯dat is not defined

function myfun(param:number){
    let ret = 0
    let dat = param + 10;
    eval("ret = dat+1")
    return ret;
}

一勞永逸的方法

雖然通過把函數(shù)封裝到對象,可以解決問題,但是,也說不好ts編譯器后續(xù)會不會關(guān)于對象的方法調(diào)用也進行這種優(yōu)化。

所以還有一個解決方法,就是在函數(shù)里把param用一下,讓編譯器覺得它被使用了,別吃掉。

比如改成這樣,把param輸出一下。。。

function myfun(param:number){
    let ret = 0
    console.debug(param);
    eval("ret = param+1")
    return ret;
}

到此這篇關(guān)于Vue TypeScript使用eval函數(shù)遇到的問題的文章就介紹到這了,更多相關(guān)Vue TypeScript使用eval函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue中倒計時組件的實例代碼

    vue中倒計時組件的實例代碼

    這篇文章主要介紹了vue中倒計時組件的實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-07-07
  • vue中使用event.target.value踩坑記錄

    vue中使用event.target.value踩坑記錄

    這篇文章主要介紹了vue中使用event.target.value踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue如何使用CSS自定義變量

    Vue如何使用CSS自定義變量

    這篇文章主要介紹了Vue如何使用CSS自定義變量,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下
    2021-05-05
  • vue webpack多頁面構(gòu)建的實例代碼

    vue webpack多頁面構(gòu)建的實例代碼

    這篇文章主要介紹了vue webpack多頁面構(gòu)建的實例代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2018-09-09
  • vue3獲取元素并且修改元素樣式的實戰(zhàn)操作

    vue3獲取元素并且修改元素樣式的實戰(zhàn)操作

    ref作為在vue里面我們獲取元素最常用的一個api,在vue3迎來改造,下面這篇文章主要給大家介紹了關(guān)于vue3獲取元素并且修改元素樣式的相關(guān)資料,需要的朋友可以參考下
    2023-04-04
  • vue如何實現(xiàn)簡易的彈出框

    vue如何實現(xiàn)簡易的彈出框

    這篇文章主要介紹了vue如何實現(xiàn)簡易的彈出框,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue中循環(huán)多個li(表格)并獲取對應(yīng)的ref的操作代碼

    vue中循環(huán)多個li(表格)并獲取對應(yīng)的ref的操作代碼

    我想要獲取每一個循環(huán)并獲取每一個li(或者其它循環(huán)項)的ref,以便于后續(xù)的操作,接下來通過本文給大家分享vue中循環(huán)多個li(表格)并獲取對應(yīng)的ref的操作代碼,感興趣的朋友跟隨小編一起看看吧
    2024-02-02
  • 解決vue prop傳值default屬性如何使用,為何不生效的問題

    解決vue prop傳值default屬性如何使用,為何不生效的問題

    這篇文章主要介紹了解決vue prop傳值default屬性如何使用,為何不生效的問題。具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • ElementUI?Upload源碼組件上傳流程解析

    ElementUI?Upload源碼組件上傳流程解析

    這篇文章主要為大家介紹了ElementUI?Upload源碼組件上傳流程解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11
  • vue.js的computed,filter,get,set的用法及區(qū)別詳解

    vue.js的computed,filter,get,set的用法及區(qū)別詳解

    下面小編就為大家分享一篇vue.js的computed,filter,get,set的用法及區(qū)別詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03

最新評論