详细聊聊Vue中的options选项

目录
  • 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 } }

用途

缓存

  • 如果依赖的属性没有变,化就不会重新计算
  • 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: false
  • deep的意思是监听 object的时候是否往深了看

computed和watch的区别

computed计算属性

  • computed是计算属性,也就是依赖某个值或者props通过计算得来得数据;
  • computed的值是在getter执行之后进行缓存的,只有在它依赖的数据发生变化,会重新调用getter来计算;
  • 不支持异步,当computed内有异步操作时无效,无法监听数据的变化
  • 调用时不需要加括号

watch 监听器

  • watch是监听器,可以监听某一个数据,然后执行相应的操作;
  • 不支持缓存,数据变直接会触发相应的操作;
  • 监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
  • 支持异步操作;
  • deep选项:侦听的对象的 property 改变时被调用,不论其被嵌套多深
  • immediate:为true时侦听开始之后被立即调用

总结

到此这篇关于Vue中options选项的文章就介绍到这了,更多相关Vue的options选项内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue的Options用法说明

    el:挂载点 与$mount有替换关系 new Vue({ el: "#app" }); new Vue({}).$mount('#app') 注:被你选为挂载点的那个元素,如果在index.html里那个元素里面本来就有内容,在渲染时会消失(网速慢可以看到),被这个vue实例的对应内容所覆盖. data:内部数据 支持对象和函数,优先用函数 new Vue({ //优先使用函数 data() { return { n: 0, } } }).$mount("#app"

  • Vue实例的对象参数options的几个常用选项详解

    一. 新建一个Vue实例可以有下列两种方式: 1.new一个实例 var app= new Vue({ el:'#todo-app', // 挂载元素 data:{ // 在.vue组件中data是一个函数,要写成data () {}这种方式 items:['item 1','item 2','item 3'], todo:'' }, methods:{ // 方法成员 rm:function(i){ this.items.splice(i,1) } } }) // 之后再 export def

  • 详细聊聊Vue中的options选项

    目录 Vue中的options选项 options的五类属性 入门属性 使用vue文件添加组件 computed(计算属性) 用途 缓存 示例: watch(监听) 用途 何为变化 deep: true是干什么的? computed和watch的区别 computed计算属性 watch 监听器 总结 Vue中的options选项 options的五类属性 数据: data,props,propsdata,computed,methods,watch DON: el,template,rende

  • 详细聊聊vue中组件的props属性

    目录 问题一:那props具体是怎么使用呢?原理又是什么呢?往下看 问题二:那如果我们想给年龄加1岁,怎么实现? 问题三:对于年龄这一类型,我们最希望拿到的是什么数据类型? 问题四:可以限制类型,那是不是也可以限制是否必传呢? 问题五:props接收的属性值可以修改吗? 问题六:必须要修改props属性值,怎么办? 总结:配置项props 总结 今天这篇文章,让你彻底学会props属性-- props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data.el.ref是一个级别的配

  • 详细聊聊Vue生命周期的那些事

    目录 前言 一.Vue2中的生命周期 实例的生命周期 其它生命周期钩子 二.Vue3中的生命周期 Options API生命周期 Composition API生命周期 两个新的Vue3生命周期函数 最后 前言 如今学习Vue的人越来越多了,Vue框架或React框架的学习也成为开发了前端开发人员的必备技能,今天我们就来聊聊Vue中的生命周期函数,Vue中生命周期函数的参考价值很高,让我们来一起认识它吧~ 一.Vue2中的生命周期 实例的生命周期 在介绍生命周期之前,我们需要知道在Vue中要渲染

  • 聊聊Vue中provide/inject的应用详解

    众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数据管理的 Vuex. 在这么多的组件通信方式中,provide/inject 显得十分阿卡林(毫无存在感).但是,其实 provide/inject 也有它们的用武之地.今天,我们就来聊聊 Vue 中 provide/inject 的应用. 何为 provide/inject provide/inj

  • 基于Vue中this.$options.data()的this指向问题

    目录 this.$options.data()的this指向问题 vue文档中有关于data的指向问题的解释 vue骚操作之this.$options.data() 重置vue组件的data数据 小结一下 this.$options.data()的this指向问题 项目里遇到一个问题,用this.$options.data()重置组件data时报错,原因是因为form里的rule规则采用了this写法. 如下: rules: {         code: [this.$rules.requir

  • 聊聊Vue 中 title 的动态修改问题

    由于之前的 Vue 项目打包成果物一直是嵌入集成平台中,所以一直没有关注过项目的 title.直到最近,突然有个需求,要求点击按钮在集成平台外新开一个页面,此时我才发现,原来我的项目的 title 一直是万年不变的 vue-project.理所应当的,这个问题被测试爸爸提了一个大大的缺陷. 犯了错的我赶紧解决这个问题,但是经过一段时间的摸索,我却发现,这一个小小的问题,却有着很多不同的解法. 首先,毫无疑问的是,我们应该使用 document.title 方法通过 DOM 操作来修改 title

  • 聊聊vue 中的v-on参数问题

    vue中v-on:clock的使用 最近在学习vue.js框架.记下其中遇到的一些问题,以便以后查阅. 首先,这是一个页面(为了便于观察,将各个标签都一一着色): 其中html代码: <div class="groupbody "> <ul class="list "> <li v-for="cell in todo.groupbody " class="pagegroupcell " v-on:

  • 简单聊聊Vue中的计算属性和属性侦听

    目录 1. 计算属性 语法:  1.简写方式: 语法:  2.完整写法: 2. 监视(侦听)属性 1. 监视属性watch: 2. 深度监视 3. 区别和原则 总结 1. 计算属性 定义 计算属性:要用的属性不存在,要通过已有属性计算得来,计算属性要有一个全新的配置项computed 对Vue来说,data里面的数据就是属性,只要Vue中的数据改变,就会重新解析模板,遇到插值语法里的方法会重新调用 原理 底层借助了Objcet.defineproperty方法提供的getter和setter.

  • 详细聊聊Vue的混入和继承

    目录 前言 混入 混入注意(重名情况) 局部混入 全局混入 继承 混入和继承的区别 总结 前言 Vue中的混入(mixin)是一个比较简单的知识点.熟悉CSS预处理语言比如less.sass的开发者对mixin肯定很熟悉.Vue中的mixin几乎跟less等里面的mixin一样,都是将定义好的一些功能原样注入Vue组件当中,也有些类似面向对象编程中的继承(我只是说类似:) ). mixin是一个对象,这个对象的属性可以是Vue实例或者组件实例的生命周期钩子.属性等,当全局混入或者混入到组件后,V

  • 一文带你详细了解Vue中的v-for

    目录 v-for v-set 重绘和回流 虚拟DOM computed计算属性 总结 v-for 作用: 列表渲染,所在标签结构,按照数据数量,循环生成.指令写在谁身上,就循环创建谁 1.语法: v-for = "(值变量,索引变量) in 目标结构" :key = 索引变量 v-for = "值变量 in 目标结构 :key = 索引变量" 目标结构:可以是数组,对象,字符串 2.数组方法如果修改了原数据就会更新 页面,如果没有修改,则不会,但可以重新赋值给变量让

随机推荐