vue核心基础指令总结，Vue 侦听器，vue选项computed&watch的应用场景及区别，Vue的生命周期钩子函数 / 生命周期函数

模板：

• 文本插值 ：｛{msg}｝

双括号的标签会被替换为相应组件实例中msg属性的值，每次msg属性更改他会同步更新。

Vue的所有的数据绑定支持javascript表达式

• ｛｛number+1｝｝
• ｛｛ok？‘yes’“：‘no’｝｝
• ｛｛message.split（‘ ’）.reverse().join（‘ ’）｝｝
•   <div :id='' `list-$(id)`"></div>

v-cloak指隐藏尚未编译完成的dom模版，打开页面的时候会在没编译完时显示｛｛ ｝｝，而此代码的意思是将大括号隐藏。

vue指令总结：

指令 (Directives) 是带有 v- 前缀的特殊属性，vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

1. 文本类指令   v-text、v-html、v-pre 
2. 操作属性v-bind指令:如果绑定的是null或者undefined,那么属性会从渲染的元素上移除，简单写法，直接用“ ：”代替v-bind，布尔形依据ture/false来决定是否存在于该元素上，disabled是最常见的例子。
3. 操作样式:class和:style,Vue做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。Class 与 Style 如何动态绑定样式?可以通过对象语法和数组语法进行动态绑定。
4. 操作事件v-on简写@，v-on / @click 指令 - 绑定事件，vue选项参数 - methods 定义事件处理方法  
5. 条件显示指令v-if和v-show,条件指令 v-if、v-else-if、v-else,显示隐藏 v-show
6. v-show 与 v-if 有什么区别？

•  循环指令v-for

• 表单处理v-model指令: 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定

修饰符:修饰符是由点开头的指令后缀

 事件修饰符:

 表单修饰符:

1. number：转数值类型
2. trim:去空格
3. lazy:懒加载，输入完毕后再加载

vue实例中this：

- this就是当前实例化出来的vue对象(vue实例)
- vue构造函数内部解析时会把data、methods等中的值直接设置给这个实例化出来的vue实例对象
- 最终直接通过这个vue实例对象即可访问data中的属性以及methods中的方法等

vue选项computed&watch：

计算属性 computed：

什么是计算属性？

1️. 计算属性指的是通过一系列运算之后，最终得到一个属性值。
2️. 这个动态计算出来的属性值可以被模板结构或 methods 方法使用。

3. 定义：在computed里面声明一些函数, 函数必须要有'return'值

计算属性的特点：

1️ 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性；

2️ 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算

 getter和setter:

 使用get和set函数 需要把计算属性函数改成计算属性对象，当计算属性值自身改变后执行set方法

详细请看前一章的博客，有详细的说明。 

侦听属性 watch

侦听Vue 实例上data中的数据和一些非DOM元素改变，可以获取数据改变前的值和改变后的值

immediate 选项：默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用 immediate 选项。

deep 选项：深度侦听
如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选项。

监听对象单个属性的变化：如果只想监听对象中单个属性的变化，则可以按照如下的方式定义watch 侦听器：

使用过侦听器吗 在vue中碰到过什么bug ？

侦听器用来检测数据的改变
当侦听的那个数据发生改变后就会触发侦听器中的对应函数
一般我更多的使用是用在侦听路由的变化->重新获取数据（如果搜索在以应用的outer-view中显示对应用的数据）
之前碰到一个坑点侦听器默认无法侦听复杂数据类型
侦听器默认情况下侦听的是数据内存地址后面用深度侦听deep:true 来解决这个问题，或者侦听精确到对象中的那个值也可

const { createApp } = Vue
			const app = createApp({
				data() {
					return {
						username: 'jack',
					}
				},
				//侦听器 响应式属性
				watch: {
					username(newValue, oldValue) {
						console.log('newValue ', newValue, ' oldValue ', oldValue)
					},
				},
			}).mount('#app')

computed 和 watch 的区别和运用的场景？

---

 局部注册和全局注册

局部：

   定义好组件

      const ComA={
            data(){
                  return{
                    count:0,
                  }
            },
            methods:{
                plus(){
                    this.count++;
                }

            },
                 /*html*/
            template:`
                        <div>
                    <button @click="plus">{{count}}加一</button>
                    </div>
                     `
        }

在使用的根组件中注册 

  components:{
                ComA,
            },

 在根组件的模版中使用：

      template: `<div>
                       <com-a></com-a>
                  </div>`

全局注册：

依旧定义好组件，可以复用局部注册的代码

在全局注册：

 const app=createApp(App)
        app.component('ComA', ComA) // 先全局注册，再挂载mount
        app.mount('#app')

 在需要的模版中使用

      template: `<div>
                       <com-a></com-a>
                  </div>`

---

Vue的生命周期

创建阶段------------>运行阶段--------------->销毁 ，我们在这里强调的是一个阶段

生命周期函数：是由 vue 框架提供的内置函数，会伴随着生命周期，自动按次序执行

生命周期强调的是时间段，生命周期函数强调的是时间点

生命周期钩子函数  / 生命周期函数

• beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
• created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板 
• beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中 
• mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示 

运行期间的生命周期函数：

• beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
• updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

销毁期间的生命周期函数:

• beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。