发表于： 2019-11-12 22:34:19
1 1185
今天完成的事：
复习了vue的知识点
明天计划的事：
继续复习vue和js知识
遇到的问题：
暂无
收获：
JS中执行环境与作用域的关系
执行环境（有时也叫环境）是 javascript 中最为重要的一个概念，执行环境定义了变量或函数有权访问的其他数据，决定了他们各自的行为。
每个函数都有一个自己的执行环境，某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁 （全局执行环境直到应用程序退出
——例如关闭网页或浏览器——时才会被销毁）。
每个执行环境都有一个与之关联的变量对象（variable object），环境中定义的所有变量和函数都保存在这个对
象中。虽然我们编写的代码无法访问这个对象，但解析器在处理数据时会在后台使用它。
作用域链：
当代码进入到某个执行环境，准备执行时，会为该执行环境对应的变量对象创建一个作用域链。作用域链其实就相当于一个变量
对象的集合，其第一个元素是当前执行环境的变量对象，最后一个元素是全局执行环境的变量对象（在浏览器中即window对象）。
标识符解析：
标识符解析是沿着作用域链一级一级地搜索标识符的过程。
标识符解析说白了就是查找变量（包括函数定义）。而且这个查找过程是按照作用域链的顺序走的，也就是先搜索当前执行环境
的变量对象，找到就终止，没找到就继续搜索上一层执行环境的变量对象，一直搜索到顶层的window对象。
个人的理解的作用域:
其实就是[[scope]],每个js的函数都是一个对象，对象中有写属性我们可以访问，有些不行；
js引擎存取的[[scope]]就是其中一个；它就是作用域，是隐性的属性，只有系统能够用它，存储了执行期的上下文的集合。
关于vue的几个小技巧
1 状态共享
随着组件的细化，就会遇到多组件状态共享的情况，Vuex就可以解决这类问题，不过就像Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，vue.js 2.6新增加的Observable API ，通过使用这个api可以应对一些简单的跨组件数据状态共享的情况。
如下这个例子，将在组件外创建一个store，然后在App.vue组件里面使用store.js提供的store和mutation方法，同理其它组件也可以这样使用，从而实现多个组件共享数据状态。
首先创建一个store.js，包含一个store和一个mutations，分别用来指向数据和处理方法。
import Vue from "vue";
export const store = Vue.observable({ count: 0 });
export const mutations = {
setCount(count) {
store.count = count;
}
};
复制代码
然后在App.vue里面引入这个store.js，在组件里面使用引入的数据和方法
<template>
<div id="app">
<img width="25%" src="./assets/logo.png">
<p>count:{{count}}</p>
<button @click="setCount(count+1)">+1</button>
<button @click="setCount(count-1)">-1</button>
</div></template>
<script>
import { store, mutations } from "./store";
export default {
name: "App",
computed: {
count() {
return store.count;
}
},
methods: {
setCount: mutations.setCount
}
};
</script>
<style>
2 长列表性能优化
在使用vue时发现vue会通过object.defineProperty对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要vue来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止vue劫持我们的数据呢？可以通过object.freeze方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。
export default {
data: () => ({
users: {}
}),
async created() {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
}
};
另外需要说明的是，这里只是冻结了users的值，引用不会被冻结，当我们需要reactive数据的时候，我们可以重新给users赋值。
export default {
data: () => ({
users: []
}),
async created() {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
},
methods:{
// 改变值不会触发视图响应
this.users[0] = newValue
// 改变引用依然会触发视图响应
this.users = newArray
}
};
返回列表
评论