vue知识点梳理

叁歲伎倆 2023-08-17 15:58 144阅读 0赞

**条件和循环**

<p v-if="seen">现在你看到我了</p>
    <li v-for="todo in todos">
          {
       { todo.text }}
    </li>

**事件处理、数据双向绑定**

<button v-on:click="reverseMessage">反转消息</button>
    <p>{
       { message }}</p>
    <input v-model="message">

**v-once 指令**  
能执行一次性地插值，当数据改变时，插值处的内容不会更新，但请留心这会影响到该节点上的其它数据绑定

<span v-once>这个将不会改变: {
       { msg }}</span>

**v-bind 指令**

<todo-item
          v-for="item in groceryList"
          v-bind:todo="item"
          v-bind:key="item.id">
    </todo-item>

**vue的watch方法**

vm.$watch('a', function (newValue, oldValue) {
      // 这个回调将在 `vm.a` 改变后调用
    })

**Vue 实例的实例属性与方法**  
它们都有前缀  ， 以 便 与 用 户 定 义 的 属 性 区 分 开 来 。 上 面 的 ，以便与用户定义的属性区分开来。上面的 ，以便与用户定义的属性区分开来。上面的watch也是。

var data = { a: 1 }
    var vm = new Vue({
      el: '#example',
      data: data
    })
    vm.$data === data // => true
    vm.$el === document.getElementById('example') // => true

**vue生命周期钩子函数**  
生命周期钩子的 this 上下文指向调用它的 Vue 实例。不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a)  
1、beforeCreate/created  
``new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) } })``

2、beforeMount/mounted  
3、beforeUpdate/updated  
4、beforeDestroy/destroyed  
http请求一般在 created 里面，如果涉及到需要页面加载完成之后就在 mounted。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lX25ldmVy_size_16_color_FFFFFF_t_70]

**vue数据双向绑定**  
订阅者和发布者&&数据劫持：初始化时所有的v-model会给属性添加一个Object.defineProperty()的get和set方法，同时也会添加一个watch，并且将该属性添加到订阅器中，当数据发生变化时，会通过调用set方法通知订阅者，订阅者去更新DOM，

**vue组件间通信**  
1、父组件向子组件通信：props  
2、子组件向父组件通信：事件传递  
3、兄弟组件间传递：bus和事件发布/订阅  
4、ref和refs：直接获取组件实例及属性  
5、parent：直接获取父组件的实例及属性

**vuex**(https://blog.csdn.net/me\_never/article/details/101511565)  
state：store.state  
getter：store 中定义“getter”，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。  
Actions：Action 提交的是 mutation，而不是直接变更状态。可以包含任意异步操作；  
Mutation：mutation 都有事件类型 (type) 和 回调函数 (handler)。回调函数就是进行状态更改， state 作为第一个参数；  
module：功能模块区分

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lX25ldmVy_size_16_color_FFFFFF_t_70]: /images/20230810/3273635243b34347a657fb0f05ea3868.png