详细聊聊Vue中的options选项

Serena ·

更新时间:2024-09-20

· 232 次阅读

Vue中的options选项

options的五类属性

入门属性

使用vue文件添加组件

computed（计算属性）

用途

缓存

示例：

watch（监听）

用途

何为变化

deep: true是干什么的？

computed和watch的区别

computed计算属性

watch 监听器

总结

Vue中的options选项 options的五类属性

数据： data，props，propsdata，computed，methods，watch

DON: el，template，render，rebderError

生命周期钩子函数：beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，activated，deactivated，beforeDestroy，destroyed，erroCaptured。

资源：directives，filters，components

组合：parent，mxins，extends，provide，inject

入门属性

el（挂在点）

new Vue({
    el："#app"
    template:`<div>我是小明</div>`
})
可以使用$mount代替
new Vue({
    template:`<div>我是小明</div>`
}).$mount("#app")

data（内部数据）支持对象和函数，优先使用函数会被Vue监听

会被Vue实例代理

每次data的读写都会被Vue监听

Vue会在data变化是更新UI

对象
new Vue({
    template:"<div>{{n}}</div>",
    data:{
        n:0
    }
}).$mount('#app')
函数
vue非完整版只支持函数
new Vue({
    template:"<div>{{n}}</div>",
    data(){
        return {
            m:5
        }
    }
})$mount('#app')

methods（方法）事件处理函数或者普通函数

new Vue({
    template:"<div>{{n}}{{ add()}} <button @click="add">按钮</button></div>",
    data:{
        n:0
    },
    methods:{
        add(){
    console.log('我可以是事件处理函数也可以是普通函数')
}
        }
}).$mount('#app')

components（vue组件：注意大小写）三种方式

注册全局组件
Vue.component('Deon1', {
  template: "<h2>全局组件</h2>"
})
注册局部组件
const deon2 = {
  template: "<h2>局部组件 {{n}}</h2>",
   //在组建中data必须使用函数
  data() {
    return {
      n: "小明"
    }
  }
}
new Vue({
  components: {
    Deon2: deon2,
    Deon3:{
      template:"<h2>组件3</h3>"
  }
  },
  template: `
    <div>页面
    <Deon1></Deon1>
    <Deon2></Deon2>
 <Deon3></Deon3>
    </div> 
  `
}).$mount('#app')

使用vue文件添加组件

deon4.vue文件

<template>
  <div>我是deon.vue文件{{ name }}</div>
</template>
<script>
export default {
  data() {
    name: "组件4";
  },
};
</script>
<style scoped>
div {
  border: 1px solid red;
}
</style>

main.js

import Deon4 from './deon4.vue'
Vue.component('Deon1', {
  template: "<h2>全局组件</h2>"
})
const deon2 = {
  template: "<h2>局部组件 {{n}}</h2>",
  //在组建中data必须使用函数
  data() {
    return {
      n: "小明"
    }
  }
}
new Vue({
  components: {
    Deon2: deon2,
    Deon3: {
      template: "<h2>组件3</h3>"
    },
    Deon4
  },
  template: `
    <div>页面
    <Deon1></Deon1>
    <Deon2></Deon2>
    <Deon3></Deon3>
    <Deon4><Deon4>
    </div> 
  `
}).$mount('#app')

常用的四个生命周钩子函数created: 实例出现在内存中

mounted:实例出现在页面中触发

updated:实例出现了变化触发

destroyed:实例被销毁了触发

new Vue({
    template:"<div>{{n}}</div>",
    data:{
        n:0
    }，
     created() {
    console.log("实例出现在内存中了触发");
  },
  mounted() {
    console.log("实例出现在页面中触发");
  },
  updated() {
    console.log("实例出现了变化触发");
  },
  destroyed() {
    console.log("实例被销毁了触发");
  }
}).$mount('#app')

props（外部数据）父组件想子组传值name="n"（传入字符串）

:name="n"（传入this.n数据）

:fn="add":（传入this.add函数）

new Vue({
  components: {
    Deon1: {
      props: ["m"],
      template: "<div>{{m}}</div>"
    }
  },
  template: `<div><Deon1 :m="m"></Deon1></div>`,
  data: {
    m: 666
  }
}).$mount('#app')

computed（计算属性）

不需要加括号

他会根据依赖是否变化来缓存（如果依赖没有变化，就不会重新结算）

类型：{ [key: string]: Function | { get: Function, set: Function } }

用途

被计算出来的属性就是计算数据

例子1 用户名展示

例子2 列表展示

缓存

如果依赖的属性没有变，化就不会重新计算

getter/setter默认不会做缓存，Vue做了特殊处理

如何缓存？看示例这是示例不是Vue的实现

示例：

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

watch（监听）

data变化，就会执行函数

options.watch用法

this.$watch用法

deep：侦听的对象的 property 改变时被调用，不论其被嵌套多深

immediate：侦听开始之后被立即调用

类型：{ [key: string]: string | Function | Object | Array }

用途

当数据变化时，执行一个函数

例子1撤销

例子2 模拟computed 这样很傻，一般不这样做

何为变化

看示例

原本 let obj = {a:'a'} 现在 obj={a:'a'} 请问
obj变了没有. obj.a变了没有
简单类型看至，复杂类型(对象)看地址
这其实就是 ===的规则

示例：

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true//监听是否深入
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // 你可以传入回调数组，它们会被逐一调用
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

注意，不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined

deep: true是干什么的？ 如果object.a变了，请问object算不算变如果需要的答案是（也没变啦），那么就用deep: true如果需要的答案是（没有变)，那么就用deep: falsedeep的意思是监听 object的时候是否往深了看 computed和watch的区别 computed计算属性

computed是计算属性，也就是依赖某个值或者props通过计算得来得数据；

computed的值是在getter执行之后进行缓存的，只有在它依赖的数据发生变化，会重新调用getter来计算；

不支持异步，当computed内有异步操作时无效，无法监听数据的变化

调用时不需要加括号

watch 监听器

watch是监听器，可以监听某一个数据，然后执行相应的操作；

不支持缓存，数据变直接会触发相应的操作；

监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

支持异步操作；

deep选项:侦听的对象的 property 改变时被调用，不论其被嵌套多深

immediate:为true时侦听开始之后被立即调用

总结