Vue
Vue.js开发过程 Notes

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 有以下区别:

  1. Vue 插件是专门为 Vue 构建的,可以更好地集成到 Vue 项目中。而直接导入 JavaScript 可能需要手动进行配置和集成。
  2. Vue 插件可以使用 Vue.use() 方法来安装和使用,并且可以根据需要进行配置。而直接导入 JavaScript 则需要在项目中手动配置和使用。
  3. Vue 插件可以对 Vue 的实例进行扩展,例如添加全局组件、全局指令等。而直接导入 JavaScript 可能仅仅是一些帮助函数或类库。
  4. Vue 插件可以在多个项目中重用,而直接导入的 JavaScript 可能只能在特定的项目中使用。

总结,Vue 插件是专门为 Vue 构建的,可以更好地集成到 Vue 项目中,可以通过 Vue.use() 方法来安装和使用,并且可以根据需要进行配置,可以对 Vue 的实例进行扩展,可以在多个项目中重用。