Vue中的options选项怎么用

这篇文章主要介绍了Vue中的options选项怎么用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue中的options选项怎么用文章都会有所收获，下面我们一起来看看吧。

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: "<h3>全局组件</h3>"})注册局部组件const deon2 = {  template: "<h3>局部组件 {{n}}</h3>",   //在组建中data必须使用函数  data() {    return {      n: "小明"    }  }}new Vue({  components: {    Deon2: deon2,    Deon3:{      template:"<h3>组件3</h4>"  }  },  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: "<h3>全局组件</h3>"})const deon2 = {  template: "<h3>局部组件 {{n}}</h3>",  //在组建中data必须使用函数  data() {    return {      n: "小明"    }  }}new Vue({  components: {    Deon2: deon2,    Deon3: {      template: "<h3>组件3</h4>"    },    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   // => 2vm.aPlus = 3vm.a       // => 2vm.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: false

• deep的意思是监听 object的时候是否往深了看

computed和watch的区别

computed计算属性

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

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

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

• 调用时不需要加括号

watch 监听器

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

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

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

• 支持异步操作；

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

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

关于“Vue中的options选项怎么用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue中的options选项怎么用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。