Vue常用的7个属性、内置指令、生命周期

忘是亡心i 2024-04-23 20:02 28阅读 0赞

#### 1. 7个属性 ####

*  el 属性：
    
     *  用来指示 vue 编译器从什么地方开始解析 vue 的语法，也可以说是一个占位符。
 *  data 属性：
    
     *  用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
 *  computed 属性：
    
     *  计算属性：
        
         *  要表示的数据不存在，要通过计算得来。
         *  在 computed 对象中定义计算属性
         *  在页面中使用\{ \{方法名\}\}来显示计算的结果
         *  要用的属性不存在，要通过已有的属性计算得来。它是一个能够将计算结果缓存起来的属性，可以想象为缓存。
     *  底层借助了 Object.defineproperty 方法提供的 getter 和 setter 方法。
     *  优势：与 methods 实现相比，内部具有缓存机制（复用），效率更高，调试更方便
     *  注意：
        
         *  计算属性最终会出现在 Vue实例上，直接读取使用即可。
         *  如果计算属性要被修改，那必须写 set 函数去相应修改，
 *  template 属性：
    
     *  用来设置模板，会替换页面的元素，包括占位符。
 *  methods 属性：
    
     *  用来放置页面中的业务逻辑，js 方法一般放置在这里。
 *  render 属性：
    
     *  创建真正的虚拟DOM
 *  watch 属性：
    
     *  监听 Vue 实例中 data 属性中数据的变化
     *  通过 vm 对象的 $watch() 或 watch 配置来监视指定的属性
     *  当属性变化时，回调函数自动调用，在函数内部进行计算
     *  eg. watch:function(new, old)\{\}
     *  两个参数：一个用于返回新值，一个用于返回旧值。

#### 2. 常用内置指令 ####

*  v-text：更新元素的textContent
 *  v-html：更新元素的innerHTML
 *  v-if：如果为 true，当前标签才会输出到页面
 *  v-else：如果为 false，当前标签才会输出到页面
 *  v-show：通过 display 样式来控制显示/隐藏
 *  v-for：遍历数组/对象
 *  v-on：绑定监听事件，可以简写: eg. v-on:click=“” 简写为@click=“”
 *  v-bind：绑定解析表达式，可以简写为 ：
 *  v-model：双向数据绑定
 *  v-cloak : 防止闪现, 与 css 配合: \[v-cloak\] \{ display: none \}

#### 3. Vue 的生命周期 ####

![在这里插入图片描述][c473f7ecaf924e43a50d948b11bb537a.png_pic_center]

*  初始化显示
    
     *  beforeCreate()
     *  created()
     *  beforeMount()
     *  mounted()
 *  更新状态：this.xxx = value
    
     *  beforeUpdate()
     *  updated()
 *  销毁 vue 实例：vm.$destory()
    
     *  beforeDestory()
     *  destoryed()

常用的生命周期的方法：

1）mounted()：发送 ajax 请求，启动定时器等异步任务  
2）beforeDestory()：做收尾工作，如：清楚定时器等

[c473f7ecaf924e43a50d948b11bb537a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/41cfb0c1544445019952c471c442b113.png