vue知识点总结

1. Vue基础

• Vue实例
  Vue 实例是 Vue.js 中最基本的构建块之一。每个 Vue 应用程序都是由一个 Vue 根实例创建的，该实例通过将选项对象传递给 Vue 构造函数而创建。
  Vue 实例的属性和方法包括：
  • data：用于存储数据的对象，可以在模板中进行访问。
  • methods：用于定义在 Vue 实例中使用的方法。
  • computed：用于定义计算属性，其值会根据依赖项的变化而变化。
  • watch：用于监听特定数据的变化，一旦变化就会触发相应的回调函数。
  • directives：用于定义自定义指令。
  • filters：用于定义过滤器，可以在模板中使用。
    除了这些属性和方法之外，Vue 实例还有一些生命周期钩子
    函数，用于在实例的生命周期内执行特定的操作，例如在实例创建时执行某些操作，或在实例销毁时执行清理操作。
• 模板语法
  Vue.js 的模板语法是基于 HTML 的扩展，通过 Vue 的指令和插值语法，使得模板能够更加动态和交互。下面是一些常用的 Vue 模板语法示例：
  • 插值语法
    插值语法使用双大括号 {{}} 来绑定数据，它会将 Vue 实例中的数据渲染到模板中。<div>{{ message }}</div>
  • 指令
    指令是一种特殊的属性，它们带有 v- 前缀，指示 Vue.js 在模板中添加特殊行为。例如，v-if 指令根据表达式的值来条件性地渲染元素。
    <div v-if="showMessage">{{ message }}</div>
  • 绑定属性
    Vue.js 通过 v-bind 指令来绑定元素的属性，这使得我们可以使用表达式来动态绑定属性值。
    <img v-bind:src="imageUrl">
  • 循环
    使用 v-for 指令可以循环渲染列表中的元素。
    <ul> <li v-for="item in items">{{ item }}</li> </ul>
  • 事件绑定
    使用 v-on 指令可以绑定事件处理函数，当事件触发时会执行相应的函数。
    <button v-on:click="handleClick">Click me</button>
    以上是一些常用的 Vue 模板语法示例，它们可以通过 Vue.js 的数据响应系统来实现数据与模板的双向绑定

1.3 计算属性
Vue.js 的计算属性是基于 Vue 实例的数据计算得出的属性，它们具有缓存特性，只有当它们的依赖项发生变化时才会重新计算。计算属性常见的使用场景是对数据进行复杂的计算，并将计算结果作为属性进行渲染。下面是一些常见的计算属性的使用示例：
1.3.1 简单计算属性

<template>
  <div>
    <p>原价: {{ price }}</p>
    <p>折扣价: {{ discountedPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      discount: 0.2
    }
  },
  computed: {
    discountedPrice() {
      return this.price * (1 - this.discount)
    }
  }
}
</script>

1.3.2 计算属性监听其他属性

<template>
  <div>
    <input v-model="firstName">
    <input v-model="lastName">
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}
</script>

1.3.3 计算属性使用 get 和 set

<template>
  <div>
    <p>商品数量: {{ quantity }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    quantity: {
      get() {
        return this.count
      },
      set(value) {
        this.count = value
      }
    }
  },
  methods: {
    increment() {
      this.quantity += 1
    },
    decrement() {
      this.quantity -= 1
    }
  }
}
</script>

1.4 监听器
Vue.js 的监听器是一种用来监听 Vue 实例上指定属性变化的方法，当指定属性发生变化时，Vue.js 会自动调用监听器中指定的回调函数。监听器常用于在数据变化时执行自定义的操作，比如发送请求、更新其他数据等。下面是一些常见的使用场景和示例：
1.4.1 监听简单数据变化

<template>
  <div>
    <input v-model="message">
    <p>{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
      reversedMessage: ''
    }
  },
  watch: {
    message(newValue, oldValue) {
      this.reversedMessage = newValue.split('').reverse().join('')
    }
  }
}
</script>

在以上示例中，监听器会监听 message 属性的变化，当 message 发生变化时，监听器中的回调函数会将 reversedMessage 属性更新为 message 的反转字符串。
1.4.2 监听对象属性变化

<template>
  <div>
    <p>用户名: {{ user.name }}</p>
    <p>年龄: {{ user.age }}</p>
    <button @click="incrementAge">加1岁</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 18
      }
    }
  },
  watch: {
    'user.age'(newValue, oldValue) {
      console.log(`年龄从 ${oldValue} 变为 ${newValue}`)
    }
  },
  methods: {
    incrementAge() {
      this.user.age += 1
    }
  }
}
</script>

在以上示例中，监听器会监听 user 对象的 age 属性变化，当 age 属性发生变化时，监听器中的回调函数会打印出变化的信息。
1.4.3 深度监听数组和对象

<template>
  <div>
    <p v-for="item in items">{{ item.name }} - {{ item.price }}</p>
    <button @click="addItem">添加商品</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '商品A', price: 100 },
        { name: '商品B', price: 200 }
      ]
    }
  },
  watch: {
    items: {
      handler(newValue, oldValue) {
        console.log('items 数组发生变化')
      },
      deep: true
    }
  },
  methods: {
    addItem() {
      this.items.push({ name: '新商品', price: 300 })
    }
  }
}
</script>

在以上示例中，监听器会深度监听 items 数组的变化，当数组中的对象属性发生变化时，监听器中的回调函数会打印出变化的信息。
1.5 组件
Vue.js 的组件是可复用的 Vue 实例，每个组件都可以拥有自己的数据、方法和生命周期钩子等。在 Vue.js 中，我们可以通过 Vue.component() 方法来定义一个全局组件，也可以通过组件选项来定义一个局部组件。下面是一些常见的组件定义示例：
1.5.1 全局组件

<template>
  <div>
    <hello-world></hello-world>
  </div>
</template>

<script>
Vue.component('hello-world', {
  template: '<p>Hello, World!</p>'
})
</script>

在以上示例中，我们通过 Vue.component() 方法定义了一个名为 hello-world 的全局组件，然后在模板中使用该组件。
1.5.2 局部组件

<template>
  <div>
    <custom-button></custom-button>
  </div>
</template>

<script>
import CustomButton from './CustomButton.vue'

export default {
  components: {
    CustomButton
  }
}
</script>

在以上示例中，我们通过组件选项 components 来定义了一个名为 CustomButton 的局部组件，并在模板中使用该组件。注意，这里的 CustomButton 组件是从一个单独的 .vue 文件中导入的。
1.5.3 动态组件

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="changeComponent">切换组件</button>
  </div>
</template>

<script>
import FirstComponent from './FirstComponent.vue'
import SecondComponent from './SecondComponent.vue'

export default {
  data() {
    return {
      currentComponent: 'FirstComponent'
    }
  },
  methods: {
    changeComponent() {
      this.currentComponent = this.currentComponent === 'FirstComponent' ? 'SecondComponent' : 'FirstComponent'
    }
  },
  components: {
    FirstComponent,
    SecondComponent
  }
}
</script>

在以上示例中，我们通过 :is 属性来动态渲染组件，同时提供一个按钮来切换组件。注意，这里的 currentComponent 是一个 data 属性，我们可以在方法中改变该属性来动态渲染不同的组件。
1.6 生命周期
Vue.js 的生命周期可以分为八个阶段，分别是 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed。在每个阶段，Vue.js 会自动调用相应的生命周期钩子函数，我们可以在这些钩子函数中执行一些初始化操作或清理操作。下面是一些常见的生命周期示例：
1.6.1 beforeCreate 和 created 钩子

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  }
}
</script>

1.6.2 beforeMount 和 mounted 钩子

<template>
  <div>
    <p ref="message">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
    console.log(this.$refs.message.innerText)
  }
}
</script>

在以上示例中，我们定义了一个名为 message 的 data 属性，并在 beforeMount 和 mounted 钩子函数中分别打印了日志。beforeMount 钩子函数在模板编译之后，挂载之前被调用，mounted 钩子函数在实例挂载完成之后被调用，这两个钩子函数常用于操作 DOM 元素或执行一些异步操作。
1.6.3 beforeUpdate 和 updated 钩子

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">改变消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, Vue!'
    }
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  }
}
</script>

在以上示例中，我们定义了一个名为 message 的 data 属性，并在 beforeUpdate 和 updated 钩子函数中分别打印了日志。beforeUpdate 钩子函数在数据更新之前被调用，updated 钩子函数在数据更新之后被调用，这两个钩子函数常用于在数据更新之前或之后执行一些操作。
1.6.4 beforeDestroy 和 destroyed 钩子

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="destroy">销毁实例</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  methods: {
    destroy() {
      this.$destroy()
    }
  },
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  destroyed() {
    console.log('destroyed')
  }
}
</script>

1.7 自定义指令
在 Vue.js 中，我们可以通过自定义指令来扩展其功能，从而实现一些非常灵活的操作。下面是一个简单的自定义指令示例：

<template>
  <div>
    <p v-highlight="'yellow'">这是一段需要高亮的文字</p>
  </div>
</template>

<script>
export default {
  directives: {
    highlight: {
      bind(el, binding) {
        el.style.backgroundColor = binding.value
      }
    }
  }
}
</script>

在以上示例中，我们定义了一个自定义指令 highlight，并在模板中使用了它。指令的作用是将绑定的元素的背景颜色设置为指定的颜色。在 directives 属性中定义了 highlight 指令的实现，它有一个 bind 钩子函数，在指令绑定到元素上时被调用。在 bind 钩子函数中，我们通过 el 参数访问到绑定的元素，通过 binding 参数访问到指令的绑定值，然后将背景颜色设置为绑定值即可。

• 渲染函数
• 插件

2. Vue组件

• 组件通信
• 组件生命周期
• 父子组件通信
• 非父子组件通信
• 动态组件
• 组件注册
• 组件props

3. Vue路由

• 安装Vue Router
• 路由配置
• 路由导航
• 命名路由
• 嵌套路由
• 路由参数
• 路由组件传参

4. Vue状态管理

• 安装Vuex
• 状态管理基础
• state
• getters
• mutations
• actions
• modules

5. Vue进阶

• 插槽
• 过渡和动画
• 自定义过滤器
• mixin
• v-model原理
• 服务端渲染
• 单元测试