Vue电商项目中遇到的一些问题

1、为什么vue组件有的写成export default，有什么用？

• 声明一个vue，相当于 new Vue({})  
• 达到可复用的目的，也就是说，export default 相当于导出当前vue组件，在其它引入当前组件时可以使用当前组件中的方法和变量。

2、export 和 export default 的区别

• export 可以导出多个命名模块，引入时（都用import）用大括号括起来
• export default 只能导出一个默认模块，这个模块可匿名，引入的时候可以给这个模块取任意名字，且不需要用大括号括起来

3、export default 中的 data（）是什么意思？

• 起到局部变量的作用。也就是说，这个data（）中return的变量和方法只限于当前声明此data（）的组件使用。如果全局vue有个变量叫 user,当前组件也有个变量叫user，那vue里面的到底用哪个？所以data()就起到了变量隔离的一种效果。

4、v-model与:model区别

v-model（即v-on 和 v-bind的语法糖）：通常用于input的双向数据绑定 ，也可以实现子组件到父组件数据的双向数据绑定
 :model是v-bind:model的缩写：这种只是将父组件的数据传递到了子组件，并没有实现子组件和父组件数据的双向绑定。当然引用类型除外，子组件改变引用类型的数据的话，父组件也会改变的。

5、在引入组件时路径上加上@符作用是什么？

在编写vue文件中引入模块

import model from "@/common/model";

这里路径前面的“@”符号表示什么意思？

resolve: {
    // 自动补全的扩展名
    extensions: ['.js', '.vue', '.json'],
    // 默认路径代理
    // 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找
    alias: {
        '@': resolve('src'),
        '@config': resolve('config'),
        'vue$': 'vue/dist/vue.common.js'
    }
}

@ 等价于 /src 这个目录，避免写麻烦又易错的相对路径

6、vue 中 ref 的用法

ref 有三种用法：

　　1、ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素

　　2、ref 加在子组件上，用this.$refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.（ref值）.方法（） 就可以使用了。

　　3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

应注意的坑：

1、如果通过v-for 遍历想加不同的ref时记得加 :号，即 :ref =某变量 ;
这点和其他属性一样，如果是固定值就不需要加 :号，如果是变量记得加 :号。（加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串常量（String））

2、通过 :ref =某变量 添加ref（即加了:号） ,如果想获取该ref时需要加 [0]，如this.$refs[refsArrayItem] [0]；如果不是:ref =某变量的方式而是 ref =某字符串时则不需要加，如this.$refs[refsArrayItem]。

1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。

补充：

一般来讲，想获取INPUT框，首先在获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

然后在javascript里面这样调用：this.$refs.input1  这样就可以减少获取dom节点的消耗了

7、vue.use和vue.prototype.$xxx的区别

两种方法，实现的原理都是在 Vue.prototype 上添加了一个方法

（1）vue.use（全局挂载）------一般用于 插件（页面标签）

1. Vue的插件是一个对象, 就像Element.
2. 插件对象必须有install字段.
3. install字段是一个函数.
4. 初始化插件对象需要通过Vue.use()

（2）vue.prototype.$xxx（局部挂载，即原型链挂载）------一般用于 方法（需要使用this.$引用时）

你在当前项目中，可能会用到很多的工具方法，公共方法，但是你不想去污染全局的一个作用域或者每个组建中重复写同样的方法，那么就可以通过vue.prototype去定义成他的实例对象.

（3）补充第三种挂载方式：在实例中挂载（这里挂载 router）

import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

总结：

1. 不是为了vue写的插件(插件内要处理)不支持Vue.use()加载方式
2. 非vue官方库不支持new Vue()方式
3. 每一个vue组件都是Vue的实例，所以组件内this可以拿到Vue.prototype上添加的属性和方法。

8、

 

 

 

 

 

 

、