vue基础部分学习

## vue基础：帮助记忆面试题

1. `eslint`的rule

    1. function的括号前要‘空格’

    2. 最后的一行写完要‘回车’多留出一行

    3. 没有写内容的属性要删除

    4. 形参，实参的括号前要加逗号

1. `@click == v-on:click`

2. 事件处理：赋值出对应的id值，在class处做id判断拿到数据 <ul>

      <!-- click事件中将事件名称的值赋值为id值，v-bind动态绑定class用对象包裹用双等号判断返回值是否和当前id一样为true。即可完成点击点亮的事件 -->

      <li :class="{ active: active == item.id }" @click="active = item.id" v-for="item in items" :key="item.id">

        {{item.message}}

      </li>

    </ul>

3. 数据传递：

    - `props`

    1. 父组件在data中设置对应的键值对。子组件用props用数值的方式接收数据。最后写在子组件的HTML标签上。

    2. 父组件的data中用一个变量包裹众多数据，在子组件的props方法中用数组接收一个string格式的变量。即可完成传递。

    - `$refs`

    1. 在子组件设置一个方法用来接收父组件的数据，

    2. 在父组件中使用子组件标签，加上ref="事件名"，设置@keyup="send"键盘点击事件

    3. 在methods方法中将键盘点击事件里写入：用this.$refs.事件名获取子组件中的数据。用将要传递的数据当作实参，传递到刚才在子组件绑定了事件里。

    4. 在子组件中的接收数据后的事件赋值上 想要的被赋值的值等于形参的值。即完成数据传递。

4. `slot`

    1. 在子组件标签上加入 ref="事件名" 和 在`template`标签上加入 `v-slot:default` 属性，就可以用this.$refs.ref名字.$slots。拿到子组件中的插槽数据。

    2. `v-slot`接收子传父的数据

      1. 在子组件`template`模板中设置slot标签，加入`v-bind:user="user"`的动态属性，传递事件子组件中的事件。

      2. 在父组件的子组件标签中加入 `v-slot:default="键名"`属性即可完成数据的传递

4. 计算属性：

    1. 写在HTML上的数据线需要计算时，要把计算的逻辑写在computed里面，写在methods里面会在每次刷新时，重新计算数据。而computed里面写的数据只要没有发生变化就会重新计算，会被缓存起来。

    2. 在methods写的方法，在HTML中使用要加上`()`来调用

5. `vuex`数据的**获取or修改**：

      1. state:

          1. this.$store.state.键名

          2. 引入辅助函数，再解构出需要的键名: const {mapState} = Vuex, ...mapState(['键名']),

      2. getter(vuex里的计算属性)

          1. this.$store.getters.事件名

      3. mutations(提交数据来更改state数据)

          1. this.$store.commit('事件名')

      4. action(有异步操作的方法)

        1. this.$store.dispatch('事件名')

        2. 使用辅助函数，并解构: const {mapState} = Vuex, ...mapState(['键名']),

        5. module 模块化，设置多个文件分别存不同的页面的数据。

6. `vuex购物车`

    1. npm install vuex@x.x

    2. 创建文件store,在里面创建index.js文件

    3. 在index.js文件中引入Vue&Vuex,Vue.use(Vuex)启动Vuex

    4. 组件化思想分划出各个模块的数据：创建modules文件转载，将各个模块的数据化为对应的文件写入modules文件里面

    5. 将写好的模块全局暴露出去，让外部文件可以访问or修改数据： export default new Vuex.Store({

        modules: {

            products

        }

    })

    6. 在main.js中引入store。new Vue中挂载到全局在能在全局使用this.$store方法

    7. 余下……是api的调用来获取和传输数据了。

    8. `命名空间`配合`辅助函数`：

        1. 在需要使用命名空间的modules文件中的export default {

            namespaced: true

        }

        2. 将使用到该modules的数据加上命名空间的格式例如 this.$store.dispatch('products/getProducts')

        3. 辅助函数配合命名空间**格式**：...mapState('products', ['products'])

    9. vuex和组件中的数据相互使用：

        1.  编写vuex里cart的数据，使用命名空间。vuex里的index.js中暴露出全局。

        2. 使用辅助函数将addToCart添加到加入购物车的事件中，点击的对应商品传到addToCart，再写上购物车需要的对应数据

        3. 在checkAll方法的get(){}中用every遍历添加进购物车的isChecked是否全部为true，有一个不为true就返回false

        4. reduce,接收两个参数：1：接收第一个or上一个的数据。2：接收第二个or下一个的数据。函数体内传入两个参数，第一个用于左逻辑计算，第二个为——定义第一次相加时的初始数据。也就是：初始数据+传进来的第一个数据=第一次计算的结果。

        5. `.toFixed(2)` 保留两位小数。 `Number(传入需要数字化的数据)`

7. 动态组件：

    1. 引入子组件，设置模板标签，

    2. `<component :is="对应的模板名">`

    3. 还可以 `<component v-bind="data中对应的数据">`在data中写入对应的标签名和数据即可完成标签的赋值。

8. 异步组件：

    1. 在 components方法里将`键：() => {'对应的文件路径'}`

    2. 打开页面时，异步的组件会在触发时才下载。打包时异步文件会被以chunck开头的文件打包。——面试题

9. mixin混入组件

    1. mixin和被混入组件的data\computed数据发生冲突：取被混入组件的data数据

    2. watch监听和生命周期产生冲突，先执行mixin的生命周期在执行被混入组件的生命周期

    3. methods发生冲突，取被混入组件的值

    4. 高频面试点：mixin和模板的区别？先说mixin没有template，接着说数据隔离：父子组件中的数据是隔离就算同名也不会发生冲突。和mixin和组件发生数据冲突时的优先级。

10. 虚拟节点&渲染函数：

    1.