VUE 随记查漏补缺

YZRHANYU

已于 2022-11-20 17:42:33 修改

阅读量262

点赞数

分类专栏：前端相关文章标签： vue.js javascript 前端

于 2022-10-07 15:18:15 首次发布

本文链接：https://blog.csdn.net/YZRHANYU/article/details/127194663

版权

前端相关专栏收录该内容

21 篇文章 3 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

VUE 随记

VUE 随记

VUE 随记

1. vue 当中访问 a.b , a 存在,b 不存在,返回 undefiend

访问 c c 不存在,报错

2. 没有 setter getter 就不是响应式的数据

3. 第一次把元素放入页面叫挂载,之后叫更新

mounted 只会被调用一次

4. Vue 当中的暴露方式

1. 暴漏方式

const school = Vue.extend({
	name:'School', // 尽量和文件名保持一致
	data(){
		return {
			name:'尚硅谷',
			address:'北京昌平'
		}
	},
	methods: {
		showName(){
			alert(this.name)
		}
	},
})
export default school  // 暴漏
	
简化
export default Vue.extend({
	name:'School',
	data(){
		return {
			name:'尚硅谷',
			address:'北京昌平'
		}
	},
	methods: {
		showName(){
			alert(this.name)
		}
	},
})
	
再次简化

export default {
	name:'School',
	data(){
		return {
			name:'尚硅谷',
			address:'北京昌平'
		}
	},
	methods: {
		showName(){
			alert(this.name)
		}
	},
}

5. 组件引入没有报错,但是也没有显示有一种可能是命名冲突了

6. 只要data中的数据发生改变,那么 vue 一定会重新解析模板 , 重新解析模板的时候,只要遇到插值语法,一定会重新调用

7. 打印对象显示

{
    "__ob__": {
        "dep": {
            "id": 3882,
            "subs": {
                "length": 0
            }
        },
        "value": {
            "__ob__": {
                "dep": {
                    "id": 3882,
                    "subs": "Object"
                },
                "value": {
                    "__ob__": "Object"
                },
                "vmCount": 0
            }
        },
        "vmCount": 0
    }
}

在使用 console.log(JSON.stringify(item)) 后打印出字符串

可能分析

这个对象由 Vue 管理了

数据劫持

百度后查到

vue中，带有_ob__:Observer的数组，无法取到里面的值
__ob__ 会指向一个Observer对象，每个被双向绑定的对象元素（数组也是对象）都会有一个__ob__ ，而且是单例的
自己也百度了下vue的Observer，只是得到大概信息：
observer是Vue核心中最重要的一个模块（个人认为），能够实现视图与数据的响应式更新，底层全凭observer的支持
百度也有答案讲的是：控制台打印的是引用，打印的时候并没有值，之后某个时刻有值了，然后才能打印出来值
控制台打印的是引用, 你打印的那一次并没有值, 之后某个时刻有值了, 然后你去控制台点小箭头展开, 就会发现有值.

8. 组件没有引入,也正常使用了

情景 : 在写项目的时候,功能都实现了,突然发现并没有在 components 当中注册组件,而且也没有报错

Unknown custom element: <modal> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

页面中倒是写了 import 导入的语句,把 import 删掉后,发现还是可以用的

猜测是不是做了全局引入,但是全局搜索排查之后并没有找到引入的位置

而且测试将另一个组件的注册和导入注释掉,就报错了

原因 : 百度后,找到了

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。 
只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。 如下：

<template>
    <view class="container">
        <uni-list>
            <uni-list-item title="第一行"></uni-list-item>
            <uni-list-item title="第二行"></uni-list-item>
        </uni-list>
    </view>
</template>
<script>
    // 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
    export default {
        data() {
            return {

            }
        }
    }
</script>

使用步骤：

在pages.json配置以下参数
组件引入符合命名规则
页面中直接使用

使用easycom的好处

简化组件的使用，提高开发效率
不论组件目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。

说明

easycom方式引入的组件无需在页面内import，也不需要在components内声明，即可在任意页面使用
easycom方式引入组件不是全局引入，而是局部（按需）引入。例如在H5端只有加载相应页面才会加载使用的组件
在组件名完全一致的情况下，easycom引入的优先级低于手动引入（区分连字符形式与驼峰形式）
考虑到编译速度，直接在pages.json内修改easycom不会触发重新编译，需要改动页面内容触发。
easycom只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）。不处理后缀为.nvue的组件。但vue组件也可以全端运行，包括小程序和app-nvue。可以参考uni ui，使用vue后缀，同时兼容nvue页面。
nvue页面里引用.vue后缀的组件，会按照nvue方式使用原生渲染，其中不支持的css会被忽略掉。这种情况同样支持easycom