Vue.js开发过程 Notes
var _that = this的意义
在 JavaScript 中,当你在一个函数内部访问 this 指针时,它指向的可能不是你预期的对象。这是因为 this 指针的指向取决于函数调用时的上下文。 在 Vue.js 中,如果你在组件的 methods 中定义了一个函数,那么在函数内部访问 this 指针将指向组件的实例。但是,如果你在函数内部调用了另一个函数,那么此时的 this 指针可能已经指向了另一个对象。 为了解决这个问题,可以在函数的开头声明一个变量 _that,并将 this 赋值给它,这样你就可以在整个函数中使用 _that 来访问组件实例了。 例如:
mounted() {
var _that = this;
setTimeout(function() {
_that.message = 'Hello';
}, 1000);
}
这里 setTimeout 是一个异步函数,在回调函数中 this 指向的不是 vue 组件实例,所以需要使用 _that 来保存 this。 另外在es6中有 let that = this; 或者 使用箭头函数来替代传统的 function 也可以解决 this 指向问题。 总结,var _that = this主要是为了在函数中保存 this 指向。
await关键字
await 是一个 JavaScript 关键字,它只能在 async 函数中使用。 await 用于等待一个异步操作(通常是一个 Promise 对象)完成,并返回其结果。 所以说,await 是用于等待异步请求完成并获取结果的,而不是用于同步请求。 例如:
async function getData() {
let response = await fetch('https://some-api.com/data');
let data = await response.json();
return data;
}
这里的fetch是一个异步的请求,使用await来等待这个请求结束并获取响应数据,这样就可以让程序继续执行下面的代码而不是阻塞程序。 总结,await是异步请求等待。
Vue项目的一般结构
Vue.js 项目的一般目录结构如下:
├── index.html
├── package.json
├── package-lock.json
├── README.md
├── node_modules
├── public
│ ├── index.html
│ ├── favicon.ico
│ └── manifest.json
├── src
│ ├── assets
│ │ ├── images
│ │ └── styles
│ ├── components
│ ├── views
│ ├── router
│ ├── store
│ ├── App.vue
│ └── main.js
├── dist
├── babel.config.js
├── package.json
└── README.md
主要目录和文件的作用如下:
- public目录: 存放静态资源文件,如 index.html、favicon.ico、manifest.json 等。
- src目录: 存放项目源代码。
- src/assets 目录: 存放静态资源文件,如图片、样式文件等。
- src/components 目录: 存放 Vue 组件。
- src/views 目录: 存放页面组件。
- src/router 目录: 存放 Vue 路由配置。
- src/store 目录: 存放 Vuex 的状态管理。
- src/App.vue 文件: 根组件。
- src/main.js 文件: 程序的入口文件。
- dist 目录: 打包后的文件。
- babel.config.js 文件: Babel 配置文件。
- package.json 文件: 项目配置文件。
- README.md 文件: 项目说明文件。
这是一个大致的目录结构,在实际的开发中,根据项目的不同,可能会有所变化。 总结,Vue.js 项目的一般目录结构主要包括 public 目录,src目录,dist目录,babel.config.js,package.json,README.md等文件和目录。
箭头函数和普通函数的区别
箭头函数 优点:
- 简洁易读。
- 没有自己的 this 上下文,能避免 this 指针混乱。
缺点:
- 不能使用 arguments 对象。
- 不能作为构造函数
普通函数 优点:
- 可以使用 this 和 arguments 对象。
- 可以作为构造函数。
缺点:
- 可能会出现 this 指针混乱的问题。
如果需要使用 this 和 arguments 对象,或者需要将函数用作构造函数,那么就应该使用普通函数。 如果只是简单的函数调用,并且不需要使用 this 和 arguments 对象,那么可以使用箭头函数。 arguments 对象:在不知道函数传入参数的个数的情况下,可以访问所有的参数。
JS中两个等号和三个等号的区别
JavaScript 中的比较运算符有两种:等于运算符(==)和严格等于运算符(===)。
- 两个等号(==)表示的是“相等”,它会在比较之前进行类型转换。
- 三个等号(===)表示的是“严格相等”,它不会进行类型转换。
例如:
1 == '1' // true
1 === '1' // false
在上面这个例子中,第一个表达式返回 true,因为在比较之前,字符串 ‘1’ 被转换成了数字 1。而第二个表达式返回 false,因为它没有进行类型转换。 综上所述,推荐使用三个等号(===)而不是两个等号(==),因为它更严格,可以避免类型转换带来的错误。 总结,三个等号(===)表示严格相等,不会进行类型转换,更严格,更安全。
Vue插件和直接导入js的区别
Vue 插件和直接导入 JavaScript 有以下区别:
- Vue 插件是专门为 Vue 构建的,可以更好地集成到 Vue 项目中。而直接导入 JavaScript 可能需要手动进行配置和集成。
- Vue 插件可以使用 Vue.use() 方法来安装和使用,并且可以根据需要进行配置。而直接导入 JavaScript 则需要在项目中手动配置和使用。
- Vue 插件可以对 Vue 的实例进行扩展,例如添加全局组件、全局指令等。而直接导入 JavaScript 可能仅仅是一些帮助函数或类库。
- Vue 插件可以在多个项目中重用,而直接导入的 JavaScript 可能只能在特定的项目中使用。
总结,Vue 插件是专门为 Vue 构建的,可以更好地集成到 Vue 项目中,可以通过 Vue.use() 方法来安装和使用,并且可以根据需要进行配置,可以对 Vue 的实例进行扩展,可以在多个项目中重用。