vue3基础

一、基础语法

1. v-once 指定元素或组件只渲染一次

当数据变化时，元素或者租金啊以及其所有的子元素都将被是为静态内容并且跳过，可以用于性能优化

2.v-text 用于更新元素 textContent

3.v-html 将某个html内容进行解析

4.v-pre 跳过元素和他的子元素编译过程，显示原始的Mustache标签

<template id="app">
    <div v-pre>{{message}}</div>
</template>

页面会直接显示： {{message}}

5.v-cloak 保持在元素上直到关联组件实例结束编译

一般与css规则一起使用如 [v-cloak] {display: none}一起使用时，这个指令可以隐藏未编译的标签直到组件实例准备完毕

6.v-bind绑定属性

动态绑定属性：某些情况下，属性名无法确定就可以使用： :[属性名] = "值"

绑定class-对象语法：

 

绑定class-数组语法：

 

 

绑定style：

7.v-on 绑定事件

修饰符：

8.v-if v-else-if v-else v-show

v-if：为true才进行渲染 为false 不渲染或销毁掉

v-show：为true显示 为false是添加一个样式 display: none

9.v-for 循环

遍历数组： item in 数组 或 （item, index）in 数组

遍历对象： value in Object || (value, index) in Object || （value, key, index）in Object

在使用v-for进行列表渲染时，通常需要给元素或组件绑定一个key

key的作用是什么？

key属性用于在vue的虚拟dom算法中，在新旧nodes对比时辨别VNodes，没有key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素

二、Options API

1.computed计算属性

大多数情况下，计算属性只需要一个getter方法即可，所以可以直接写成一个函数，但是，如果我们确实想要设置计算属性的值呢？那就要用到setter方法

2.data为什么是一个函数而不是一个对象

vue的组件会复用，数据之间应该是相互独立不受影响的，如果使用对象，会出现一个边全部变，使用函数返回值是一个新的实例不会互相影响。

3.methods对象中的方法为什么不能使用箭头函数定义？

箭头函数绑定了父级作用域的上下文，最终会向上找到script中的this，所以this并不会按照期望只指向组件实例，而是指向了window对象,window中我们无法获取到data返回对象中的数据，this.a将是undefined。

vue内部实际上对methods中的方法进行了遍历，将对应的方法通过bind绑定了this

4.侦听器watch

在某些情况下，我们需要知道data中数据变化，并进行相关操作，就需要使用侦听器

new Vue({
  el: '#root',
  data: {
    cityName: 'shanghai',
    name: 'zzw'
  },
  watch: {
    cityName(newName, oldName) {
      // 数据发生了变化
    }，
    name: 'nameChange'   // 也可以通过这种字符串形式的方法名 直接调用methods中的方法
  } 
})

immediate/handler、deep

监听的数据后面写成对象形式，包含handler方法和immediate，之前我们写的函数其实就是在写这个handler方法；immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler

new Vue({
  el: '#root',
  data: {
    cityName: 'beijing'，
    person: {
      name: 'zzw',
      age: 22,
  }
  },
  watch: {
    cityName: {
    　 handler(newName, oldName) {
      　　// ...
    　 },
    　 immediate: true    // 默认false值第一次绑定时不执行监听  true 最初绑定值时就监听
       deep: true,   // 深度监听对象内部的改变
    },
    'person.name': {
       handler(newName, oldName) {
       // 当只需要监听对象中某个属性的值时，就可以用字符串的形式监听
       },
       deep: true,
       immediate: true
    }
  } 
})

其它使用：

this.$watch

传入回调数组