面试提问：说说 vue 父子组件加载顺序 这我知道答案 父 beforeCreate 父 created 父 beforeMount 子 beforeCreate 子 created 子 beforeMount 子 mounted 父 mounted 子组件若有 props 的话更新顺序是四步，若无的话两步不触发父亲的钩子。 父 beforeUpdate 子 beforeUpdate 子 updated 父 updated 父组件更新顺序是 父 beforeUpdate 子 deactivated 父 updated 销毁过程是 父 beforeDestroy 子 beforeDestroy 子 destroyed 父 destroyed 再问，如果有多个子组件呢？我不太能确定。 加载多个子元素 回头写了一个简单的vue视图，父调用子，以下代码复制可用。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<!DOCTYPE html> <html> <head> <title>Form Demo</title> </head> <body> <div id="app"> <input-group :forms="forms" v-for="(forms, index) in options" :key="index"></input-group> </div> <!-- Vue.js v2.6.11 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.component('input-group', { props: ['forms'], beforeCreate() { console.log('child beforeCreate'); }, created() { console.log('child created'); }, beforeMount() { console.log('child beforeMount'); }, mounted() { console.log('child mounted'); }, template: `<div> <template v-for="item in forms"> <input type="text" v-model="item.data"> </template> </div>` }) let options = [] for (let i = 0; i < 2; i++) { for (let j = 0; j < 2; j++) { options[i] = options[i] || []; options[i].push({ data: '', }) } } var app = new Vue({ el: '#app', beforeCreate() { console.log('parent beforeCreate'); }, created() { console.log('parent created'); }, beforeMount() { console.log('parent beforeMount'); }, mounted() { console.log('parent mounted'); }, data: { options: options, }, }) window.app = app; console.log(app); </script> </body> </html> |
控制台打印结果如下
|
1 2 3 4 5 6 7 8 9 10 11 |
parent beforeCreate parent created parent beforeMount child beforeCreate child created child beforeMount child beforeCreate child created child beforeMount (2) child mounted parent mounted |
能得出结论，第一个子元素在 beforeMount 后不会直接 mounted，而是进入下一个子元素的 beforCreate。 from:https://www.cnblogs.com/everlose/p/12538472.html
View DetailsYou are trying to create a new angular, react, vue app, and you end up with an error message saying: npm ERR! Unexpected end of JSON input while parsing near There’s a high chance that your npm cache been damaged. Try:
|
1 |
npm cache clean --force |
If you are a windows user, try deleting all files in this folder:
|
1 |
C:\Users{{your-username}}\AppData\Roaming\npm-cache |
Then…
|
1 |
npm cache verify |
If that doesn’t work, try updating to the lastest (understand the risks)
|
1 |
npm i npm@latest -g |
I hope this helps! from:https://dev.to/rishiabee/npm-err-unexpected-end-of-json-input-while-parsing-near-743
View Details前言 【类】和【接口】是 JavaScript 未来的方向，我们的 API 调用也将如此，朝着这个方向和业务模块同步分类、同步升级。本文讲的正是 —— Vue 魔法师，如何将 API “类化”？ 万物皆模块，万物可归类。闲言少叙，直接正题。 分类 API 环境： Vue2+ 或 Vue3+ 咱这里直接 VueCLI 迅速快捷构建
|
1 |
vue create vue-api-module |
得到如下目录
|
1 2 3 4 5 |
--src ----store ------index.js ----App.vue ----main.js |
然后新建文件 api.js 如下，
|
1 2 3 4 5 6 7 |
--src ----services ------api.js ----store ------index.js ----App.vue ----main.js |
基础类 API 我们先创建一个基础类如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class BaseApiService { baseUrl = "https://jsonplaceholder.typicode.com"; resource; constructor(resource) { if (!resource) throw new Error("Resource is not provided"); this.resource = resource; } getUrl(id = "") { return `${this.baseUrl}/${this.resource}/${id}`; } handleErrors(err) { // 处理错误： console.log({ message: "Errors is handled here", err }); } } |
baseUrl：设置请求根路径； resource：来源； getUrl：获取链接函数，包含 baseUrl、resource、id； handleErrors：处理错误函数； 只读类 API 然后，我们再创建一个子类：包含 fetch、get 只读方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
class ReadOnlyApiService extends BaseApiService { constructor(resource) { super(resource); } async fetch(config = {}) { try { const response = await fetch(this.getUrl(), config); return await response.json(); } catch (err) { this.handleErrors(err); } } async get(id) { try { if (!id) throw Error("Id 不合法"); const response = await fetch(this.getUrl(id)); return await response.json(); } catch (err) { this.handleErrors(err); } } } |
fetch：获取数据； get：通过 id 获取数据； 写入类 API 接着，我们再创建一个包含可读写方法的子类：post、put、delete
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
class ModelApiService extends ReadOnlyApiService { constructor(resource) { super(resource); } async post(data = {}) { try { const response = await fetch(this.getUrl(), { method: "POST", body: JSON.stringify(data) }); const { id } = response.json(); return id; } catch (err) { this.handleErrors(err); } } async put(id, data = {}) { if (!id) throw Error("Id 不合法"); try { const response = await fetch(this.getUrl(id), { method: "PUT", body: JSON.stringify(data) }); const { id: responseId } = response.json(); return responseId; } catch (err) { this.handleErrors(err); } } async delete(id) { if (!id) throw Error("Id 不合法"); try { await fetch(this.getUrl(id), { method: "DELETE" }); return true; } catch (err) { this.handleErrors(err); } } } |
post：创建数据； put：更新数据； delete：删除数据； 继承 让我们看看两个简单的继承示例：
|
1 2 3 4 5 |
class UsersApiService extends ReadOnlyApiService { constructor() { super("users"); } } |
|
1 2 3 4 5 |
class PostsApiService extends ModelApiService { constructor() { super("posts"); } } |
【UsersApiService 类】继承了只读类 API —— ReadOnlyApiService，可以使用 fetch、get 两种方法。而 【PostsApiService 类】继承了读写类 API —— ModelApiService，可以使用 fetch、get、post、put、delete 五种方法。 我们也可以根据业务来写继承 API 类:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
class AlbumsApiService extends ModelApiService { constructor() { super("albums"); } async uploadImage() { /* 这里可以写你的上传图片逻辑 */ console.log({ message: "图片上传成功！" }); return true; } async triggerError() { try { throw Error(" API 模块调用错误！"); } catch (err) { this.handleErrors(err); } } } |
导出 我们在 api.js 导出这些 […]
View Details