前言

指令

v-model 双向绑定

在前端领域里很多时候都离不开与表单的接触，那么在vue为了让写表单更方便，也利用了vue本身双向绑定的的特性诞生了v-model这个语法糖指令 v-model主要绑定input textarea selse三个元素 实现原理看官方解释：

所以当使用v-model绑定表单时不用有额外的心理负担 绑定之后写就完了 响应原理之后再写。。。

//当绑定普通输入框的 和 文本域的时候 文本内的数据改变 响应数据就会跟着改变
  <input type="text" v-model="text" />
  <textarea v-model="text"></textarea>
  //可以将他们 想象成下面这种片段 文本域同理
  就是当input内容每次改变的时候 都会将里面的内容赋值给text text再显示到input框里
  <input type="text" :value="text" @change="$event=>text=$event.target.value">
  
  //下面这段话跟上面的一比是不是简便了许多

简单的输入框表单清楚了 那单选和多选框该怎么写呢

  //当多个复选框使用v-model绑定同一个变量时 会默认他们为一组 
  //使用复选框绑定时变量一定是数组，因外要选择多个数据 不可能回是单单一个值
  另外：因外选择框绑定的是布尔值 当绑定的树为空数组时，默认绑定的这组树全为false
 <input type="checkbox" value="1" v-model="numb">
 <input type="checkbox" value="2" v-model="numb">
 <input type="checkbox" value="3" v-model="numb">
 <input type="checkbox" value="4" v-model="numb">
  //当单选框使用v-model时 帮定同一个变量  会默认他们为一组 这个跟复选框相同
  //使用单选框绑定的数据为单个值 因为每次只能选择一个数据
 <input type="radio" value="苹果" v-model="fruits">
 <input type="radio" value="香蕉" v-model="fruits">
 <input type="radio" value="葡萄" v-model="fruits">

v-html 解析文本中的html元素

在vue中，模板语法是不会自动解析文本中的html片段的，也许会有一些情况写会要解析文本中html标签，一般情况下富文本编辑器中会使用到。

 //当有着这样一段文本想要解析出里面的html模板的时候  就可以使用v-html 而div则不会被解析出来
 //他只能说是一个载体   当html片段被解析出来之后 div自然而然的就消失了
 
  html=`<h1>标题</h1>
  <main>主体内容</main>
  <footer>页脚</footer>`
  
  <div v-html="html"></div>

v-text 文本绑定

这个指令几乎没人用，因为他的作用就是将文本绑定到当前元素中，vue的模板语法中，模板插值比他更好用

 //这里有一个变量 将这个变量的文本渲染到元素里  下面两种是等价的 我是更喜欢第二种写法
  text= '我真的不懂vue'
  <span v-text="text"></span>
  <span>{{ text }}</span>

响应式基础

定义响应式数据

这里主要先写vue2，vue3中比较写法比较多 后面会单独写 在vue2中 定义响应数据 直接return出入一个data函数就可以了，没有任何负担，想要定义响应数据 直接data里面梭哈即可，想要使用模板中直接写变量名即可，如果要在js中调用这个响应数据那么需要使用this.xxx来使用，主要原因是因为vue2使用的是class类写法，想要调用属性就需要是this.xxx调用

<template>
//在模板中使用 name 被渲染出来就直接是 张三
  <button>{{ name }}</button>
</template>
<script>
export default {
  data() {
    return {
      name: "张三",//此时这个name就是响应数据
    };
  },
};
//这个是生命周期 会在后面的文章中讲到
mounted(){
    //此时就可以调用data里面的属性了
    console.log(this.name)//张三
}
</script>

看到定义了data也许可能会有疑惑 为什么是个函数，可不可以是对象 vue中，data必须是一个函数，这是因为Vue在处理组件时，需要保证每个组件的实例都有独立的data对象。

如果data不是函数，而是直接的一个对象，那么每次组件实例化时，这个对象都会被引用，而不是被复制。这意味着，如果一个组件内部改变了data的值，那么这个改变将会影响到其他所有的组件。

通过将data变成一个函数，每次组件实例化时，这个函数都会被调用，返回一个新的对象。这样每个组件实例都有自己独立的data对象，改变不会影响到其他的组件。

注意

Vue2的响应原理主要通过数据劫持结合发布订阅者模式的方式实现。具体来说，主要利用了Object.defineProperty对数据的劫持。

当数据发生变化时，会触发setter方法，进而触发依赖收集。依赖收集就是将watcher和具体的属性通过发布订阅者模式管理起来，当数据改变后，能够更精准地更新视图。 最后，通过dep来执行watcher的notify方法，最终使用Object.defineProperty做响应式。 需要注意的是，由于Object.defineProperty的限制，Vue 2无法原生监听数组，所以当我们给一个数组重新赋值时 vue是无法感知到的，解决的方法是使用Vue.set或使用数组方法如push、pop、shift、unshift、splice、sort或splice 当我们给一个响应数据对象添加新的属性或者更改属性时，vue也是感知不到的 对于感知不到数据，在vue2中我们可以主动添加响应

    //对象手动响应使用$set 对象 属性名 属性值
    this.$set(obj, key, value);
    //数组手动响应使用$set 数组 值 索引
    this.$set(arr, value, index);

定义方法

定义方法就很简单了 在vue中只需要将方法写入到 methods对象中就可以了

//模板中直接调用就可以了 当点击了按钮就会直接调用setName这个方法
<template>
  <button @click="setName">{{ name }}</button>
</template>
export default {
  data() {
    return {
      name: "张三",
    };
  },
  methods: {
  //在js中调用方法和调用响应数据是一样的 只需要加上this.xxx就可以调用了
    setName() {
      this.name='李四'
    }
  }
};
</script>

监听（watch）和计算属性（computed）

watch监听

有时候我们想知道一个值是否改变，并且在这个值改变的时候进行一些操作，这个时候vue提供的watch监听就派上用场了 vue2中监听有两种写法，分别针对基础类型和引用类型的

  watch: {
    //如果是要监听值类型的数据，直接就可以将响应数据的属性名当作函数名来写
    //函数中有一个参数 就是响应数据对应的参数，
    name(v) {
      console.log(v);//这里name每次改变都会打印一次
    },
    //如果是要监听对象中的其中一个值，需要用引号将监听的值引起来，如下面这种 
    //当然最终得到的值是一个值类型
    'form.name'( v ) {
       console.log(v);//这里form.name每次改变都会打印一次
    },
    //当监听的是一个引用类型的时候，那么这个就应该写成一个对象
    //里面的handler函数是在这个对象里面的内容改变时就回调用 另外还有两个属性
    form: {
      handler(v) {
        console.log(v);//form里面的值每次改变都会调用 显示的是一个对象
      },
      deep: true,//深度监听 不管对象的值是什么如何改变 都能监听的到
      immediate:true//首次立即执行 正常情况下监听里面只有数据改变了才会执行 这个参数为真时 首次进入组件就会立即执行handler函数
    }
  },

computed计算属性

计算属性是什么呢？他的作用是将当前结果缓存起来，如果内部产生副作用，改变了结果，才会再次执行 在一些大型计算场景，合理的使用计算属性可以有效地提高性能

  data() {
    return {
      m: Math.random(),
    };
  },
  computed: {
    //模板中使用跟调用方法类似 且必须要有返回值
    //这里num只有等m改变了 才会重新在模板中渲染 一般情况下num是被缓存起来的 组件跟新num是不会跟着重新渲染的
    num() {
    //副作用  就是num中引用的一些响应数据改变之后 产生的一些新的数据 
      return m * 3;
    },
  },

计算属性和监听对比

个人感觉两者是没必要比的，各有各的用途，但这个总是会被面试的提问到

watch和computed有何区别？

watch是Vue实例中的一个属性，用于观察和响应数据的变化。你可以为watch提供一个函数或者一个字符串作为要观察的属性。当观察的属性值发生变化时，watch函数会被调用，并传入新的值和旧的值。你可以在watch函数中执行任何逻辑来响应属性的变化。

computed是Vue实例中的一个属性，用于计算基于其他数据属性的新属性值。你可以为computed提供一个函数，该函数接收依赖的数据属性作为参数，并返回一个新的属性值。当依赖的数据属性发生变化时，computed属性值将自动更新。

• watch用于观察和响应数据的变化，你可以在函数中执行任何逻辑来处理属性的变化。
• computed用于计算基于其他数据属性的新属性值，当依赖的数据属性发生变化时，计算属性值将自动更新。

结尾