溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue中出現(xiàn)function?()?{?[native?code]?}錯(cuò)誤怎么解決

發(fā)布時(shí)間：2022-04-12 10:22:10 來源：億速云 閱讀：1618 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容主要講解“vue中出現(xiàn)function () { [native code] }錯(cuò)誤怎么解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue中出現(xiàn)function () { [native code] }錯(cuò)誤怎么解決”吧!

出現(xiàn)function () { [native code] }錯(cuò)誤的解決

控制臺(tái)輸出錯(cuò)誤：

[Vue warn]: Unknown custom element: <p1> - did you register the component correctly? 
For recursive components, make sure to provide the "name" option.

頁(yè)面提示：

function () { [native code] }，無(wú)法出現(xiàn)我們想要的內(nèi)容

vue中出現(xiàn)function?()?{?[native?code]?}錯(cuò)誤怎么解決

頁(yè)面代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vue">
	<!-- 下面這行代碼出錯(cuò)-->
    <p1>{{currentTime1}}</p1></br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm=new Vue({
        el:"#vue",
        data:{
            message:"hello world"
        },
        methods:{
            currentTime1: function () {
              return Date.now();//返回當(dāng)前時(shí)間戳
          }
        }
    });
</script>
</body>
</html>

綜上錯(cuò)誤，究其原因就是新人對(duì)“計(jì)算屬性”：computed和“事件處理”：methods傻傻分不清楚。根據(jù)官方文檔總結(jié)如下：

對(duì)于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計(jì)算屬性。其余可以使用methods處理。

vue中出現(xiàn)function?()?{?[native?code]?}錯(cuò)誤怎么解決

所以，下次如果再出現(xiàn)function () { [native code] }，請(qǐng)使用對(duì)應(yīng)的方法獲取值。

這里的methods方法就應(yīng)該使用currentTime1()調(diào)用，計(jì)算屬性computed就應(yīng)該使用currentTime2調(diào)用。

完整methods方法和計(jì)算屬性對(duì)比運(yùn)行代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vue">
    <p1>{{currentTime1()}}</p1></br>
    <p1>{{currentTime2}}</p1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm=new Vue({
        el:"#vue",
        data:{
            message:"hello world"
        },
        methods:{
            currentTime1: function () {
              return Date.now();//返回當(dāng)前時(shí)間戳
          }
        },
        computed:{  //存在緩存，建議不經(jīng)常的變化的在次操作
            currentTime2:function () {
                return Date.now();
            }
        }
    });
</script>
</body>
</html>

頁(yè)面效果：


vue中出現(xiàn)function?()?{?[native?code]?}錯(cuò)誤怎么解決

vue使用過程中遇到的bug及解決

1.用event.target操作當(dāng)前元素出現(xiàn)bug

改為用event.currentTarget。

2.data數(shù)據(jù)更新之后渲染頁(yè)面是異步的

所以要在$nextTick里面，DOM元素更新之后再操作DOM

3.v-cloak解決網(wǎng)絡(luò)不好時(shí)頁(yè)面顯示雙花括號(hào){{}}問題

<template>
  <div id="app">
    <div v-cloak>{{ item.title }}</div>
  </div>
</template>
<style>
  [v-cloak] {
      display: none;
  }
</style>

4.v-pre跳過組件和子組件的編譯過程

比如<span v-pre>{{ instead }}</span>渲染出來的是{{ instead }}字符串，不會(huì)再js中找instead這個(gè)數(shù)據(jù)

5.element的navMenu導(dǎo)航菜單的index不能用數(shù)字

而要用字符串。

解決辦法： :index = "index + &lsquo;&rsquo;"    轉(zhuǎn)化成字符串

6.vue中main.js一引入sass文件就報(bào)錯(cuò)

提示路徑找不到或者依賴找不到，是因?yàn)閣ebpack.base.conf.js中

{
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      }

重復(fù)配了，把它刪掉就好了（新版的vue-cli默認(rèn)配置了這個(gè)）

7.所有的v-if最好都加上key

否則因?yàn)橄嗤瑯?biāo)簽元素復(fù)用會(huì)導(dǎo)致意想不到的bug

到此，相信大家對(duì)“vue中出現(xiàn)function () { [native code] }錯(cuò)誤怎么解決”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手