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时侦听开始之后被立即调用