笔记(二),VUE V-MODEL 双向绑定,以及 watch 和 computed的区别

vue官网上的v-model指令的介绍是

v-model

• 预期：随表单控件类型不同而不同。

• 限制：

  • <input>
  • <select>
  • <textarea>
  • components

• 修饰符：

  • .lazy- 取代input监听change事件
  • .number- 输入字符串转为有效的数字
  • .trim- 输入首尾空格过滤

用法：

在表单控件或者组件上创建双向绑定。细节请看下面的教程链接。

对于v-model VUE指出在使用表单控件的时候就需要想到v-model

问题: :value的方式只能将内存中模型变量的值绑定到页面，不能将页面的修改自动同步到内存中的模型变量上——单向绑定

 解决: 双向绑定: 既能将内存中模型变量的值绑定到页面，又能将页面的修改自动同步到内存中的模型变量上。

 何时: 只要绑定可修改的表单元素，都用v-model

 如何: v-model:value=”模型变量”

   简写: v-model=”模型变量”

 原理: 所有带v-model绑定的元素，都被加入一个监视队列(watch)，由一个死循环不断监视队列中元素的内容变化。只要发生变化，就直接修改绑定的模型变量

 监视函数: 只要页面变化，就自动执行的函数

对于watch和computed的区别:

computed 计算属性

计算属性顾名思义就是通过其他变量计算得来的另一个属性，fullName在它所依赖firstName，lastName这两个变量变化时重新计算自己的值。

另外，计算属性具有缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 lastName和firstName都没有发生改变，多次访问 fullName计算属性会立即返回之前的计算结果，而不必再次执行函数。

而观察watch是观察一个特定的值，当该值变化时执行特定的函数。例如分页组件中，我们可以检测页码执行获取数据的函数。