这篇文章主要介绍了Vue中的options选项怎么用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue中的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')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')不需要加括号
他会根据依赖是否变化来缓存（如果依赖没有变化，就不会重新结算）
类型：{ [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 // => 4data变化，就会执行函数
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
如果object.a变了，请问object算不算变
如果需要的答案是（也没变啦），那么就用deep: true
如果需要的答案是（没有变)，那么就用deep: false
deep的意思是监听 object的时候是否往深了看
computed是计算属性，也就是依赖某个值或者props通过计算得来得数据；
computed的值是在getter执行之后进行缓存的，只有在它依赖的数据发生变化，会重新调用getter来计算；
不支持异步，当computed内有异步操作时无效，无法监听数据的变化
调用时不需要加括号
watch是监听器，可以监听某一个数据，然后执行相应的操作；
不支持缓存，数据变直接会触发相应的操作；
监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
支持异步操作；
deep选项:侦听的对象的 property 改变时被调用，不论其被嵌套多深
immediate:为true时侦听开始之后被立即调用
关于“Vue中的options选项怎么用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue中的options选项怎么用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
