溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“vue中出現function () { [native code] }錯誤怎么解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue中出現function () { [native code] }錯誤怎么解決”吧!
控制臺輸出錯誤：
[Vue warn]: Unknown custom element: <p1> - did you register the component correctly?
For recursive components, make sure to provide the "name" option.
頁面提示：
function () { [native code] }，無法出現我們想要的內容
![vue中出現function?()?{?[native?code]?}錯誤怎么解決](https://cache.yisu.com/upload/information/20220411/112/14347.png)
頁面代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue">
<!-- 下面這行代碼出錯-->
<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();//返回當前時間戳
}
}
});
</script>
</body>
</html>綜上錯誤，究其原因就是新人對“計算屬性”：computed和“事件處理”：methods傻傻分不清楚。根據官方文檔總結如下：
對于任何復雜邏輯，你都應當使用計算屬性。其余可以使用methods處理。
![vue中出現function?()?{?[native?code]?}錯誤怎么解決](https://cache.yisu.com/upload/admin/Ueditor/2022-04-12/6254e23dce7d9.png)
所以，下次如果再出現function () { [native code] }，請使用對應的方法獲取值。
這里的methods方法就應該使用currentTime1()調用，計算屬性computed就應該使用currentTime2調用。
完整methods方法和計算屬性對比運行代碼如下：
<!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();//返回當前時間戳
}
},
computed:{ //存在緩存，建議不經常的變化的在次操作
currentTime2:function () {
return Date.now();
}
}
});
</script>
</body>
</html>頁面效果：
![vue中出現function?()?{?[native?code]?}錯誤怎么解決](https://cache.yisu.com/upload/information/20220411/112/14349.png)
改為用event.currentTarget。
所以要在$nextTick里面，DOM元素更新之后再操作DOM
<template>
<div id="app">
<div v-cloak>{{ item.title }}</div>
</div>
</template><style>
[v-cloak] {
display: none;
}
</style>比如<span v-pre>{{ instead }}</span>渲染出來的是{{ instead }}字符串，不會再js中找instead這個數據
而要用字符串。
解決辦法： :index = "index + ‘’" 轉化成字符串
提示路徑找不到或者依賴找不到，是因為webpack.base.conf.js中
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}重復配了，把它刪掉就好了（新版的vue-cli默認配置了這個）
否則因為相同標簽元素復用會導致意想不到的bug
到此，相信大家對“vue中出現function () { [native code] }錯誤怎么解決”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
