Live2d Test Env

今日心血来潮，重新梳理下Vue的基础知识

一. 基础认识：

1. data
   Vue实例中的数据实例对象，负责储存实例数据

2. methods
   Vue实例中的实例方法对象,负责处理实例的逻辑操作

通过以上两个基础实例对象，引出下方三个实例对象

3. watch
   检测data中的特定的值，如果该值发生改变，就会触发watch中对应该值的函数(只可以对data中的值进行改变)

4. 计算属性(computed)
   本质上是一个属性！，负责对data中要显示的值进行复杂逻辑操作，由于其本质是个属性，为了与methods，filters，进行区分，推荐函数名为名词开头
   当且仅当计算属性依赖的data改变时才会自动计算

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护...对于任何复杂逻辑，你都应当使用计算属性 --vue.org

5. 过滤器（filters）
   用于一些常见的文本格式化，通常用于对后台回显的一些数据进行格式化变得通俗

二：中阶认知
1.data
在SPA中data必须要返回一个函数的原因：
如果是不使用函数而使用对象 ，假如多次调用data中的值会导致data中指向堆内存中相同的内存空间，从而导致在页面中显示的值是相同的，此时多次调用data中的数据本质上是多次指向了data对象的同一块内存地址
如果使用的是对象返回函数，则每次调用data中的值本质上是在堆内存中多次开辟了不同的内存空间，从而每次调用都会返回一个新的对象，从而保证了数据的绝对独立性

PS:闭包的本质也与此类似。
2.methods
methods本身有一个默认参数为$event，这个是触发dom的事件对象参数

3. watch
   可以监控一个值的变换，并调用因为变化需要执行的方法
   有一个handle函数默认就是要watch方法
   请注意！
   1.当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行,如果需要第一次绑定就触发该watch函数，可以给给该watch函数添加immediate属性并赋为true
   2.如果想要监听的是data中的一个obj类型的一个属性，则需要给该watch函数添加deep属性并赋值为true，（这样会导致watch监听data下的整个该obj对象），如果仅期待监听该对象下的demos值，可以将该函数名从data中的obj变成，赋值为字符串格式

data(){
   return {
       objDemo:{
         demos:11
      }
   }    
}
watch:{
// 原本为objDemo,现在改成'objDemo.demos'
	'objDemo.demos':{
		handler:(nVal)=>{
			console.log(nVal);
		},
                immediate:true // 为true表示第一次绑定值就触发该函数
		deep:true //深度监听
	}
}

4. 计算属性(computed)
   每一个computed有两个函数，getter函数是用于展示处理后的值，setter函数用于修改原值--换句话说，getter函数不改变值本身，而是在原值的基础上返回经过加工后的，包含该值的内容，而setter函数则是修改了原值本身，假设用户修改了原值，则可以在set函数内对原数据进行操作，由于要修改原值，所以setter函数接收原值为参数。
   5.过滤器
   1.多重管道符
   可以给一个数据添加多个过滤器，中间以管道符隔开，

<p>{{这是一个 | filter1 | filter2}}</p>

请注意！从左到右，右边的filter接收的永远都是从data数据到左边所有filter的值
2. 可以在v:bind中使用

三: 重要区别

1. 计算属性(computed) 与 过滤器(filter)
   相同点：
   1.对data中显示的值进行处理后显示
   2.都必须有返回值

例：页面中应回显的的是金钱数量，同时应附带金钱符号，而后台返回的仅有金钱数量，此时可以通过使用components或者filter对返回数据进行加工从而达到回显效果

区别：
computed：
依赖于一个固定的vue实例 ，在某一个实例中使用；
不接受额外参数，依赖于data属性中的变量(get)
有缓存管理机制，可减少页面调用次数
计算属性虽默认为只读，但可以定义为对象，开启可读可写模式
计算属性被作为一个类属性调用
filter:
不依赖于实例。定义一个全局过滤器，在多个实例中使用
不要求是data中的变量，可以是临时变量。可接受额外参数
无缓存机制，调用次数，取决于页面中有所多少过滤器
只能读取操作
过滤器被作为一个特殊方法处理
2. 计算属性(computed) 与watch
相同点：
都可以改变页面显示的值
区别：
computed：
声明式的描述一个值与其他值的依赖关系，如果这个值发生改变，该计算属性也会发生改变，本质上是一个属性
watch:
通过监听某个值的状态的变化动态的进行操作，本质上是一个函数
> PS: 如果可选，更推荐使用computed，这是由于computed的缓存能力，并不会重复渲染相同的值
3. 计算属性(computed)与方法(methods)
相同点：
都可以改变页面显示的值
不同点：
computed：只有在值发生变化时才会触发， 同时会缓存该值(原理基于diff算法)(值调用)
methods: 触发后不会对值进行缓存，这样则造成每次触发时都会执行一次，对于性能开销会相当大（方法调用）

4. created 与 mounted的区别
   相同点：
   在本生命周期里都可以发起网络请求
   在本生命周期里都可以操作data和methods
   不同点：
   created：
   在本生命周期内，dom并未渲染出来，此时进行dom相关操作必定会报错
   如果期待请求数据快一些，可以在该生命周期内进行
   可以操作data数据和methods内的函数
   mounted:
   在本生命周期内，dom已渲染完成，可以对dom进行相关操作
   请注意！ mounted并不承诺完成对所有子组件的加载，为确保万一，可以在本周期内使用$nextTick进行组件加载

5. updated，watch和nextTick三者异同

   updated对所有数据的变化进行统一处理

   watch对具体某个数据变化做统一处理

   $nextTick是对某个数据的某一次变化进行处理

PS: 如有原作者看到请留言。

以上。