vue的options是什么属性,vue3 @options
Options是newVue的一个参数，我们一般称之为options或者构造选项。下面这篇文章主要介绍Vue中关于选项的相关信息，通过示例代码非常详细的介绍。有需要的朋友可以参考一下。
目录
vue中的选项，选项的五类属性，入门属性，用Vue文件添加组件，计算的(计算的属性)使用情况缓存示例：手表使用情况有什么变化？什么是深刻的：真实的？计算的和监视计算的计算属性之间的差异监视侦听器摘要
Vue中的options选项
options的五类属性
Data: data，props，propsdata，computed，methods，watchDON: el，template，render，rebderError生命周期钩子函数：beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，activated，deactivated，beforeDestroy，Destroy，erroCaptured .资源：指令、过滤器、组件组合：父、mxins、扩展、提供、注入
入门属性
El(挂在点上)新Vue({
埃尔： #app
模板：/div我是小明/div `。
})
您可以使用$mount来代替。
新Vue({
模板：/div我是小明/div `。
}).$ mount(“# app”)
数据(内部数据)支持对象和函数，优先级函数将由Vue监控，由Vue实例表示。每次读取或写入数据时，Vue都会对其进行监控，当数据发生变化时，Vue会更新UI对象。
新Vue({
模板： div{{n}}/div ，
数据：{
n:0
}
}).$ mount(“# app”)
功能
Vue不完整版只支持函数。
新Vue({
模板： div{{n}}/div ，
data(){
返回{
男：5
}
}
})$mount(#app )
方法事件处理函数或公共函数新Vue({
template: div { { n } } { { add()} } button @ click= add button/button/div ，
数据：{
n:0
},
方法：{
add(){
Console.log(我可以是事件处理函数或普通函数)
}
}
}).$ mount(“# app”)
组件(vue组件：注意大小写)通过三种方式注册全局组件。
Vue.component(Deon1 ，{
模板： h2全局组件/h2
})
注册本地组件
const deon2={
模板：“h2本地组件{{n}}/h2”，
//数据必须在生成中使用函数
data() {
返回{
小明
}
}
}
新Vue({
组件：{
Deon2: deon2，
Deon3:{
模板：“h2组件3/h3”
}
},
模板：` 1
Div页面
Deon1/Deon1
Deon2/Deon2
Deon3/Deon3
/div
`
}).$ mount(“# app”)
使用vue文件添加组件
Deon4.vue文件
模板
我是文件deon.vue {{ name }}/div。
/模板
脚本
导出默认值{
data() {
名称：“组件4”；
},
};
/脚本
样式范围
部门{
边框：1px纯红；
}
/风格
主页. js
从导入版本4。/deon4.vue
Vue.component(Deon1 ，{
模板： h2全局组件/h2
})
const deon2={
模板：“h2本地组件{{n}}/h2”，
//数据必须在生成中使用函数。
data() {
返回{
小明
}
}
}
新Vue({
组件：{
Deon2: deon2，
Deon3: {
模板：“h2组件3/h3”
},
Deon4
},
模板：` 1
Div页面
Deon1/Deon1
Deon2/Deon2
Deon3/Deon3
Deon4
/div
`
}).$ mount(“# app”)
常用的四个生命周期钩子函数创建：内存中的实例挂载：页面中的实例触发更新：实例更改触发销毁：实例销毁触发新的Vue({
模板： div{{n}}/div ，
数据：{
n:0
},
已创建(){
Console.log(实例出现在内存和触发器中)；
},
已安装(){
Console.log(“当实例出现在页面中时触发”)；
},
已更新(){
Console.log(“实例已被更改触发”)；
},
销毁(){
Console.log(“实例销毁触发器”)；
}
}).$ mount(“# app”)
Props(外部数据)父组件想传入value name=n (传入字符串):name=n (传入this.n数据):fn=add :(传入this.add函数)new Vue({
组件：{
Deon1: {
道具：[m]，
模板：“div{{m}}/div”
}
},
模板：` divDeon1 :m=m/Deon1/div `，
数据：{
男：666
}
}).$ mount(“# app”)
computed（计算属性）
没有括号的话，他会根据依赖关系是否变化来缓存(如果依赖关系没有变化，则不会再次结算)类型:{[key:string]:function { get:function，set: function}}
用途
计算属性是计算数据示例1用户名显示示例2列表显示。
缓存
如果依赖属性没有改变，则不会重新计算getter/setter。默认情况下，getter/setter不会被缓存。Vue经过特殊处理后如何缓存？看例子。这是个例子，不是Vue的实现。
示例：
var vm=new Vue({
数据：{ a: 1 }，
计算值：{
//只读
aDouble: function () {
退回这个。a * 2
},
//读取并设置
aPlus: {
get: function () {
归还这个
},
设置：函数(v) {
this.a=v - 1
}
}
}
})
vm.aPlus //=2
vm.aPlus=3
vm.a //=2
vm.aDouble //=4
watch（监听）
当数据改变时，函数options.watch使用此。$watch usage deep:被监听的对象在其属性改变时被调用，不管它的嵌套有多深。immediate:类型:{[key:string]:string function object array }
用途
监听开始后立即调用。
当数据改变时，执行一个函数。示例1撤消示例2模拟计算。很傻，一般也不会这么做。
何为变化
看样本原文let obj={a:a}现在obj={a:a}请问？
obj变了吗？obj.a变了吗？
简单类型可以看到，复杂类型(对象)可以通过地址看到。
其实这是===
示例:
var vm=new Vue({
数据：{
答：1，
乙：2，
c: 3，
d: 4，
e: {
女：{
g: 5
}
}
},
观察：{
答：函数(val，oldVal) {
console.log(新：%s，旧：%s ，val，oldVal)
},
//方法名称
b:“某种方法”，
//当任何被侦听对象的属性发生更改时，都会调用此回调，无论它的嵌套有多深。
丙：{
处理程序：函数(val，oldVal) { /*.*/},
深：真//监控深吗？
},
//这个回调会在监听开始后立即调用。
丁：{
处理程序： someMethod ，
即时：正确
},
//可以传入回调数组，它们会被逐个调用
电子版：[
手柄1 ，
函数handle2 (val，oldVal) { /*.*/},
{
处理程序：函数handle3 (val，oldVal) { /*.*/},
/* .*/
}
],
//观察vm.e.f的值：{g: 5}
e.f: function (val，oldVal) { /*.*/}
}
})
vm.a=2 //=新：2，旧：1
注意，不应该使用箭头函数来定义 watcher 函数(例如search query:new value=this . update autocomplete(new value))。原因是arrow函数绑定了父作用域的上下文，所以这不会像预期的那样指向Vue实例，this.updateAutocomplete也不会被定义。
deep: true是干什么的？
如果object.a变了，object不变吗？
如果要求的答案是(并且没有改变)，那么使用deep: true。
如果要求的答案是(不变)，那么使用deep: false。
“深”是指你在听物体时是否看得更深。
computed和watch的区别
computed计算属性
Computed是计算属性，即依靠某个值或道具计算出来的数据；计算出的值在getter执行后被缓存，只有当它所依赖的数据发生变化时，才会再次调用getter进行计算；不支持异步，在computed中有异步操作时无效。当无法监控数据更改调用时，不需要括号。
watch 监听器
Watch是监听器，可以监听一些数据，然后进行相应的操作；不支持缓存，数据变化会直接触发相应的操作；的监控功能接收两个参数，第一个参数是最新值；第二个参数是输入前的值；支持异步操作；深度选项：被监听的对象在其属性改变时被调用，不管它的嵌套有多深。immediate:为true时，在监听开始后立即调用。
总结
这就是这篇关于Vue中选项的文章。有关Vue中选项的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。