关于vue.js:如何准备好一场vue面试

SSR 也就是服务端渲染，也就是将 Vue 在客户端把标签渲染成 HTML 的工作放在服务端实现，而后再把 html 间接返回给客户端

SSR 的劣势：

更好的 SEO
首屏加载速度更快

SSR 的毛病：

开发条件会受到限制，服务器端渲染只反对 beforeCreate 和 created 两个钩子；
当须要一些内部扩大库时须要非凡解决，服务端渲染应用程序也须要处于 Node.js 的运行环境；
更多的服务端负载。

轻量级框架：只关注视图层，是一个构建数据的视图汇合，大小只有几十 kb；
简略易学：国人开发，中文文档，不存在语言障碍，易于了解和学习；
双向数据绑定：保留了 angular 的特点，在数据操作方面更为简略；
组件化：保留了 react 的长处，实现了 html 的封装和重用，在构建单页面利用方面有着独特的劣势；
视图，数据，构造拆散：使数据的更改更为简略，不须要进行逻辑代码的批改，只须要操作数据就能实现相干操作；
虚构 DOM：dom 操作是十分消耗性能的，不再应用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种形式；
运行速度更快：相比拟于 react 而言，同样是操作虚构 dom，就性能而言，vue 存在很大的劣势。

computed 实质是一个惰性求值的观察者。

computed 外部实现了一个惰性的 watcher, 也就是 computed watcher,computed watcher 不会立即求值, 同时持有一个 dep 实例。

其外部通过 this.dirty 属性标记计算属性是否须要从新求值。

当 computed 的依赖状态产生扭转时, 就会告诉这个惰性的 watcher,

computed watcher 通过 this.dep.subs.length 判断有没有订阅者,

有的话, 会从新计算, 而后比照新旧值, 如果变动了, 会从新渲染。(Vue 想确保不仅仅是计算属性依赖的值发生变化，而是当计算属性最终计算的值发生变化时才会触发渲染 watcher 从新渲染，实质上是一种优化。)

没有的话, 仅仅把 this.dirty = true。(当计算属性依赖于其余数据时，属性并不会立刻从新计算，只有之后其余中央须要读取属性的时候，它才会真正计算，即具备 lazy（懒计算）个性。)

（1）hash 模式的实现原理

晚期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简略，location.hash 的值就是 URL 中 # 前面的内容。比方上面这个网站，它的 location.hash 的值为 ‘#search’：

https://www.word.com#search

hash 路由模式的实现次要是基于上面几个个性：

URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 局部不会被发送；

hash 值的扭转，都会在浏览器的拜访历史中减少一个记录。因而咱们能通过浏览器的回退、后退按钮管制 hash 的切换；

能够通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会产生扭转；或者应用 JavaScript 来对 loaction.hash 进行赋值，扭转 URL 的 hash 值；
咱们能够应用 hashchange 事件来监听 hash 值的变动，从而对页面进行跳转（渲染）。

（2）history 模式的实现原理

HTML5 提供了 History API 来实现 URL 的变动。其中做最次要的 API 有以下两个：history.pushState() 和 history.repalceState()。这两个 API 能够在不进行刷新的状况下，操作浏览器的历史纪录。惟一不同的是，前者是新增一个历史记录，后者是间接替换以后的历史记录，如下所示：

window.history.pushState(null, null, path);
window.history.replaceState(null, null, path);

history 路由模式的实现次要基于存在上面几个个性：

pushState 和 repalceState 两个 API 来操作实现 URL 的变动；
咱们能够应用 popstate 事件来监听 url 的变动，从而对页面进行跳转（渲染）；
history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时咱们须要手动触发页面跳转（渲染）。

参考：前端 vue 面试题具体解答

相似之处：

都将注意力集中放弃在外围库，而将其余性能如路由和全局状态治理交给相干的库；
都有本人的构建工具，能让你失去一个依据最佳实际设置的我的项目模板；
都应用了 Virtual DOM（虚构 DOM）进步重绘性能；
都有 props 的概念，容许组件间的数据传递；
都激励组件化利用，将利用分拆成一个个性能明确的模块，进步复用性。

不同之处：

1）数据流

Vue 默认反对数据双向绑定，而 React 始终提倡单向数据流

2）虚构 DOM

Vue2.x 开始引入 ”Virtual DOM”，打消了和 React 在这方面的差别，然而在具体的细节还是有各自的特点。

Vue 声称能够更快地计算出 Virtual DOM 的差别，这是因为它在渲染过程中，会跟踪每一个组件的依赖关系，不须要从新渲染整个组件树。
对于 React 而言，每当利用的状态被扭转时，全副子组件都会从新渲染。当然，这能够通过 PureComponent/shouldComponentUpdate 这个生命周期办法来进行管制，但 Vue 将此视为默认的优化。

3）组件化

React 与 Vue 最大的不同是模板的编写。

Vue 激励写近似惯例 HTML 的模板。写起来很靠近规范 HTML 元素，只是多了一些属性。
React 举荐你所有的模板通用 JavaScript 的语法扩大——JSX 书写。

具体来讲：React 中 render 函数是反对闭包个性的，所以 import 的组件在 render 中能够间接调用。然而在 Vue 中，因为模板中应用的数据都必须挂在 this 上进行一次直达，所以 import 一个组件完了之后，还须要在 components 中再申明下。4）监听数据变动的实现原理不同

Vue 通过 getter/setter 以及一些函数的劫持，能准确晓得数据变动，不须要特地的优化就能达到很好的性能
React 默认是通过比拟援用的形式进行的，如果不优化（PureComponent/shouldComponentUpdate）可能导致大量不必要的 vDOM 的从新渲染。这是因为 Vue 应用的是可变数据，而 React 更强调数据的不可变。

5）高阶组件

react 能够通过高阶组件（HOC）来扩大，而 Vue 须要通过 mixins 来扩大。

高阶组件就是高阶函数，而 React 的组件自身就是纯正的函数，所以高阶函数对 React 来说大海捞针。相同 Vue.js 应用 HTML 模板创立视图组件，这时模板无奈无效的编译，因而 Vue 不能采纳 HOC 来实现。

6）构建工具

两者都有本人的构建工具：

React ==> Create React APP
Vue ==> vue-cli

7）跨平台

React ==> React Native
Vue ==> Weex

beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。在以后阶段 data、methods、computed 以及 watch 上的数据和办法都不能被拜访

created 实例曾经创立实现之后被调用。在这一步，实例已实现以下的配置：数据观测(data observer)，属性和办法的运算，watch/event 事件回调。这里没有 $el, 如果非要想与 Dom 进行交互，能够通过 vm.$nextTick 来拜访 Dom

beforeMount 在挂载开始之前被调用：相干的 render 函数首次被调用。

mounted 在挂载实现后产生，在以后阶段，实在的 Dom 挂载结束，数据实现双向绑定，能够拜访到 Dom 节点

beforeUpdate 数据更新时调用，产生在虚构 DOM 从新渲染和打补丁（patch）之前。能够在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程

updated 产生在更新实现之后，以后阶段组件 Dom 已实现更新。要留神的是防止在此期间更改数据，因为这可能会导致有限循环的更新，该钩子在服务器端渲染期间不被调用。

beforeDestroy 实例销毁之前调用。在这一步，实例依然齐全可用。咱们能够在这时进行善后收尾工作，比方革除计时器。

destroyed Vue 实例销毁后调用。调用后，Vue 实例批示的所有货色都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

activated keep-alive 专属，组件被激活时调用

deactivated keep-alive 专属，组件被销毁时调用

异步申请在哪一步发动？

能够在钩子函数 created、beforeMount、mounted 中进行异步申请，因为在这三个钩子函数中，data 曾经创立，能够将服务端端返回的数据进行赋值。

如果异步申请不须要依赖 Dom 举荐在 created 钩子函数中调用异步申请，因为在 created 钩子函数中调用异步申请有以下长处：

能更快获取到服务端数据，缩小页面 loading 工夫；
ssr 不反对 beforeMount、mounted 钩子函数，所以放在 created 中有助于一致性；

1. hash模式

晚期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简略，location.hash 的值就是 URL中 # 前面的内容。比方上面这个网站，它的 location.hash 的值为 '#search'

https://interview2.poetries.top#search

hash 路由模式的实现次要是基于上面几个个性

URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 局部不会被发送；
hash 值的扭转，都会在浏览器的拜访历史中减少一个记录。因而咱们能通过浏览器的回退、后退按钮管制 hash 的切换；
能够通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会产生扭转；或者应用 JavaScript 来对 loaction.hash 进行赋值，扭转 URL 的 hash 值；
咱们能够应用 hashchange 事件来监听 hash 值的变动，从而对页面进行跳转（渲染）

window.addEventListener("hashchange", funcRef, false);

每一次扭转 hash（window.location.hash），都会在浏览器的拜访历史中减少一个记录利用 hash 的以上特点，就能够来实现前端路由“更新视图但不从新申请页面”的性能了

特点：兼容性好然而不美观

2. history模式

history采纳 HTML5 的新个性；且提供了两个新办法：pushState()，replaceState()能够对浏览器历史记录栈进行批改，以及 popState 事件的监听到状态变更

window.history.pushState(null, null, path);
window.history.replaceState(null, null, path);

这两个办法有个独特的特点：当调用他们批改浏览器历史记录栈后，尽管以后 URL 扭转了，但浏览器不会刷新页面，这就为单页利用前端路由“更新视图但不从新申请页面”提供了根底。

history 路由模式的实现次要基于存在上面几个个性：

pushState 和 repalceState 两个 API 来操作实现 URL 的变动；
咱们能够应用 popstate 事件来监听 url 的变动，从而对页面进行跳转（渲染）；
history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时咱们须要手动触发页面跳转（渲染）。

特点：尽管好看，然而刷新会呈现 404 须要后端进行配置

Model–View–ViewModel（MVVM）是一个软件架构设计模式，由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程形式。由 John Gossman（同样也是 WPF 和 Silverlight 的架构师）于 2005 年在他的博客上发表

MVVM 源自于经典的 Model–View–Controller（MVC）模式，MVVM 的呈现促成了前端开发与后端业务逻辑的拆散，极大地提高了前端开发效率，MVVM 的外围是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易治理和应用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口申请进行数据交互，起呈上启下作用

（1）View 层

View 是视图层，也就是用户界面。前端次要由 HTML 和 CSS 来构建。

（2）Model 层

Model 是指数据模型，泛指后端进行的各种业务逻辑解决和数据操控，对于前端来说就是后端提供的 api 接口。

（3）ViewModel 层

ViewModel 是由前端开发人员组织生成和保护的视图数据层。在这一层，前端开发者对从后端获取的 Model 数据进行转换解决，做二次封装，以生成合乎 View 层应用预期的视图数据模型。须要留神的是 ViewModel 所封装进去的数据模型包含视图的状态和行为两局部，而 Model 层的数据模型是只蕴含状态的，比方页面的这一块展现什么，而页面加载进来时产生什么，点击这一块产生什么，这一块滚动时产生什么这些都属于视图行为（交互），视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 能够残缺地去形容 View 层。

MVVM 框架实现了双向绑定，这样 ViewModel 的内容会实时展示在 View 层，前端开发者再也不用低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架曾经把最脏最累的一块做好了，咱们开发者只须要解决和保护 ViewModel，更新数据视图就会主动失去相应更新。这样 View 层展示的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就齐全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端拆散计划施行的重要一环。

咱们以下通过一个 Vue 实例来阐明 MVVM 的具体实现，有 Vue 开发教训的同学应该高深莫测：

（1）View 层

<div id="app">
    <p>{{message}}</p>
    <button v-on:click="showMessage()">Click me</button>
</div>

（2）ViewModel 层

var app = new Vue({
    el: '#app',
    data: {  // 用于形容视图状态   
        message: 'Hello Vue!', 
    },
    methods: {  // 用于形容视图行为  
        showMessage(){
            let vm = this;
            alert(vm.message);
        }
    },
    created(){
        let vm = this;
        // Ajax 获取 Model 层的数据
        ajax({
            url: '/your/server/data/api',
            success(res){vm.message = res;}
        });
    }
})

（3）Model 层

{
    "url": "/your/server/data/api",
    "res": {
        "success": true,
        "name": "IoveC",
        "domain": "www.cnblogs.com"
    }
}

1. 咱们在各个页面开发的时候，会产生很多反复的性能，比方 element 中的 xxxx。像这种纯正非页面的 UI，便成为咱们罕用的 UI 组件，最后的前端组件也就仅仅指的是 UI 组件
2. 随着业务逻辑变得越来多是，咱们就想要咱们的组件能够解决很多事，这就是咱们常说的组件化，这个组件就不是 UI 组件了，而是包具体业务的业务组件
3. 这种开发思维就是分而治之。最大水平的升高开发难度和保护老本的成果。并且能够多人合作，每个人写不同的组件，最初像撘积木一样的把它形成一个页面

模板解析这种事，实质是将数据转化为一段 html，最开始呈现在后端，通过各种解决吐给前端。随着各种 mv* 的衰亡，模板解析交由前端解决。
总的来说，Vue complier 是将 template 转化成一个 render 字符串。

能够简略了解成以下步骤：

parse 过程，将 template 利用正则转化成AST 形象语法树。
optimize 过程，标记动态节点，后 diff 过程跳过动态节点，晋升性能。
generate 过程，生成 render 字符串

咱们能够在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 曾经创立，能够将服务端端返回的数据进行赋值。

举荐在 created 钩子函数中调用异步申请，因为在 created 钩子函数中调用异步申请有以下长处：

能更快获取到服务端数据，缩小页面加载工夫，用户体验更好；
SSR 不反对 beforeMount、mounted 钩子函数，放在 created 中有助于一致性。

watch是惰性执行，也就是只有监听的值发生变化的时候才会执行，然而 watchEffect 不同，每次代码加载 watchEffect 都会执行（疏忽 watch 第三个参数的配置，如果批改配置项也能够实现立刻执行）
watch须要传递监听的对象，watchEffect不须要
watch只能监听响应式数据：ref定义的属性和 reactive 定义的对象，如果间接监听 reactive 定义对象中的属性是不容许的（会报正告），除非应用函数转换一下。其实就是官网上说的监听一个getter
watchEffect如果监听 reactive 定义的对象是不起作用的，只能监听对象中的属性

看一下 watchEffect 的代码

<template>
<div>
  请输出 firstName：<input type="text" v-model="firstName">
</div>
<div>
  请输出 lastName：<input type="text" v-model="lastName">
</div>
<div>
  请输出 obj.text：<input type="text" v-model="obj.text">
</div>
 <div>【obj.text】{{obj.text}}
 </div>
</template>

<script>
import {ref, reactive, watch, watchEffect} from 'vue'
export default {
  name: "HelloWorld",
  props: {msg: String,},
  setup(props,content){let firstName = ref('')
    let lastName = ref('')
    let obj= reactive({text:'hello'})
    watchEffect(()=>{console.log('触发了 watchEffect');
      console.log(` 组合后的名称为：${firstName.value}${lastName.value}`)
    })
    return{
      obj,
      firstName,
      lastName
    }
  }
};
</script>

革新一下代码

watchEffect(()=>{console.log('触发了 watchEffect');
  // 这里咱们不应用 firstName.value/lastName.value，相当于是监控整个 ref, 对应第四点下面的论断
  console.log(` 组合后的名称为：${firstName}${lastName}`)
})

watchEffect(()=>{console.log('触发了 watchEffect');
  console.log(obj);
})

略微革新一下

let obj = reactive({text:'hello'})
watchEffect(()=>{console.log('触发了 watchEffect');
  console.log(obj.text);
})

再看一下 watch 的代码，验证一下

let obj= reactive({text:'hello'})
// watch 是惰性执行，默认初始化之后不会执行，只有值有变动才会触发，可通过配置参数实现默认执行
watch(obj, (newValue, oldValue) => {
  // 回调函数
  console.log('触发监控更新了 new',  newValue);
  console.log('触发监控更新了 old',  oldValue);
},{
  // 配置 immediate 参数，立刻执行，以及深层次监听
  immediate: true,
  deep: true
})

监控整个 reactive 对象，从下面的图能够看到 deep 理论默认是开启的，就算咱们设置为 false 也还是有效。而且旧值获取不到。
要获取旧值则须要监控对象的属性，也就是监听一个getter，看下图

总结

如果定义了 reactive 的数据，想去应用 watch 监听数据扭转，则无奈正确获取旧值，并且 deep 属性配置有效，主动强制开启了深层次监听。
如果应用 ref 初始化一个对象或者数组类型的数据，会被主动转成 reactive 的实现形式，生成 proxy 代理对象。也会变得无奈正确取旧值。
用任何形式生成的数据，如果接管的变量是一个 proxy 代理对象，就都会导致 watch 这个对象时,watch回调里无奈正确获取旧值。
所以当大家应用 watch 监听对象时，如果在不须要应用旧值的状况，能够失常监听对象没关系；然而如果当监听扭转函数外面须要用到旧值时，只能监听对象.xxx` 属性的形式才行

watch 和 watchEffect 异同总结

体验

watchEffect立刻运行一个函数，而后被动地追踪它的依赖，当这些依赖扭转时从新执行该函数

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> logs 0

count.value++
// -> logs 1

watch侦测一个或多个响应式数据源并在数据源变动时调用一个回调函数

const state = reactive({count: 0})
watch(() => state.count,
  (count, prevCount) => {/* ... */}
)

答复范例

watchEffect立刻运行一个函数，而后被动地追踪它的依赖，当这些依赖扭转时从新执行该函数。watch侦测一个或多个响应式数据源并在数据源变动时调用一个回调函数
watchEffect(effect)是一种非凡 watch，传入的函数既是依赖收集的数据源，也是回调函数。如果咱们不关怀响应式数据变动前后的值，只是想拿这些数据做些事件，那么watchEffect 就是咱们须要的。watch更底层，能够接管多种数据源，包含用于依赖收集的 getter 函数，因而它齐全能够实现 watchEffect 的性能，同时因为能够指定 getter 函数，依赖能够管制的更准确，还能获取数据变动前后的值，因而如果须要这些时咱们会应用watch
watchEffect在应用时，传入的函数会立即执行一次。watch默认状况下并不会执行回调函数，除非咱们手动设置 immediate 选项
从实现上来说，watchEffect(fn)相当于watch(fn,fn,{immediate:true})

watchEffect定义如下

export function watchEffect(
  effect: WatchEffect,
  options?: WatchOptionsBase
): WatchStopHandle {return doWatch(effect, null, options)
}

watch定义如下

export function watch<T = any, Immediate extends Readonly<boolean> = false>(
  source: T | WatchSource<T>,
  cb: any,
  options?: WatchOptions<Immediate>
): WatchStopHandle {return doWatch(source as any, cb, options)
}

很显著 watchEffect 就是一种非凡的 watch 实现。

Vue 的编译过程就是将 template 转化为 render 函数的过程分为以下三步

第一步是将 模板字符串 转换成 element ASTs（解析器）第二步是对 AST 进行动态节点标记，次要用来做虚构 DOM 的渲染优化（优化器）第三步是 应用 element ASTs 生成 render 函数代码字符串（代码生成器）

相干代码如下

export function compileToFunctions(template) {
  // 咱们须要把 html 字符串变成 render 函数
  // 1. 把 html 代码转成 ast 语法树  ast 用来形容代码自身造成树结构 不仅能够形容 html 也能形容 css 以及 js 语法
  // 很多库都使用到了 ast 比方 webpack babel eslint 等等
  let ast = parse(template);
  // 2. 优化动态节点
  // 这个有趣味的能够去看源码  不影响外围性能就不实现了
  //   if (options.optimize !== false) {//     optimize(ast, options);
  //   }

  // 3. 通过 ast 从新生成代码
  // 咱们最初生成的代码须要和 render 函数一样
  // 相似_c('div',{id:"app"},_c('div',undefined,_v("hello"+_s(name)),_c('span',undefined,_v("world"))))
  // _c 代表创立元素 _v 代表创立文本 _s 代表文 Json.stringify-- 把对象解析成文本
  let code = generate(ast);
  //   应用 with 语法扭转作用域为 this  之后调用 render 函数能够应用 call 扭转 this 不便 code 外面的变量取值
  let renderFn = new Function(`with(this){return ${code}}`);
  return renderFn;
}

key 是给每一个 vnode 的惟一 id, 依附 key, 咱们的 diff 操作能够更精确、更疾速 (对于简略列表页渲染来说 diff 节点也更快, 但会产生一些暗藏的副作用, 比方可能不会产生过渡成果, 或者在某些节点有绑定数据（表单）状态，会呈现状态错位。)

diff 算法的过程中, 先会进行新旧节点的首尾穿插比照, 当无奈匹配的时候会用新节点的 key 与旧节点进行比对, 从而找到相应旧节点.

更精确 : 因为带 key 就不是就地复用了, 在 sameNode 函数 a.key === b.key 比照中能够防止就地复用的状况。所以会更加精确, 如果不加 key, 会导致之前节点的状态被保留下来, 会产生一系列的 bug。

更疾速 : key 的唯一性能够被 Map 数据结构充分利用, 相比于遍历查找的工夫复杂度 O(n),Map 的工夫复杂度仅仅为 O(1), 源码如下:

function createKeyToOldIdx(children, beginIdx, endIdx) {
  let i, key;
  const map = {};
  for (i = beginIdx; i <= endIdx; ++i) {key = children[i].key;
    if (isDef(key)) map[key] = i;
  }
  return map;
}

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值产生扭转，下一次获取 computed 的值时才会从新计算 computed 的值；

watch： 更多的是「察看」的作用，相似于某些数据的监听回调，每当监听的数据变动时都会执行回调进行后续操作；

使用场景：

当咱们须要进行数值计算，并且依赖于其它数据时，应该应用 computed，因为能够利用 computed 的缓存个性，防止每次获取值时，都要从新计算；
当咱们须要在数据变动时执行异步或开销较大的操作时，应该应用 watch，应用 watch 选项容许咱们执行异步操作 (拜访一个 API)，限度咱们执行该操作的频率，并在咱们失去最终后果前，设置中间状态。这些都是计算属性无奈做到的。

简略说，Vue 的编译过程就是将 template 转化为 render 函数的过程。会经验以下阶段：

生成 AST 树
优化
codegen

首先解析模版，生成AST 语法树(一种用 JavaScript 对象的模式来形容整个模板)。应用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相干解决。

Vue 的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变动，对应的 DOM 也不会变动。那么优化过程就是深度遍历 AST 树，依照相干条件对树节点进行标记。这些被标记的节点 (动态节点) 咱们就能够 跳过对它们的比对，对运行时的模板起到很大的优化作用。

编译的最初一步是 将优化后的 AST 树转换为可执行的代码。

子组件不能够间接扭转父组件的数据。这样做次要是为了保护父子组件的单向数据流。每次父级组件产生更新时，子组件中所有的 prop 都将会刷新为最新的值。如果这样做了，Vue 会在浏览器的控制台中收回正告。

Vue 提倡单向数据流，即父级 props 的更新会流向子组件，然而反过来则不行。这是为了避免意外的扭转父组件状态，使得利用的数据流变得难以了解，导致数据流凌乱。如果毁坏了单向数据流，当利用简单时，debug 的老本会十分高。

只能通过 $emit 派发一个自定义事件，父组件接管到后，由父组件批改。

对于 Computed：

它反对缓存，只有依赖的数据产生了变动，才会从新计算
不反对异步，当 Computed 中有异步操作时，无奈监听数据的变动
computed 的值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于 data 申明过，或者父组件传递过去的 props 中的数据进行计算的。
如果一个属性是由其余属性计算而来的，这个属性依赖其余的属性，个别会应用 computed
如果 computed 属性的属性值是函数，那么默认应用 get 办法，函数的返回值就是属性的属性值；在 computed 中，属性有一个 get 办法和一个 set 办法，当数据发生变化时，会调用 set 办法。

对于 Watch：

它不反对缓存，数据变动时，它就会触发相应的操作
反对异步监听
监听的函数接管两个参数，第一个参数是最新的值，第二个是变动之前的值
当一个属性发生变化时，就须要执行相应的操作
监听数据必须是 data 中申明的或者父组件传递过去的 props 中的数据，当发生变化时，会触发其余操作，函数有两个的参数：
- immediate：组件加载立刻触发回调函数
- deep：深度监听，发现数据外部的变动，在简单数据类型中应用，例如数组中的对象发生变化。须要留神的是，deep 无奈监听到数组和对象外部的变动。

当想要执行异步或者低廉的操作以响应一直的变动时，就须要应用 watch。

总结：

computed 计算属性 : 依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值产生扭转，下一次获取 computed 的值时才会从新计算 computed 的值。
watch 侦听器 : 更多的是察看的作用，无缓存性，相似于某些数据的监听回调，每当监听的数据变动时都会执行回调进行后续操作。

使用场景：

当须要进行数值计算, 并且依赖于其它数据时，应该应用 computed，因为能够利用 computed 的缓存个性，防止每次获取值时都要从新计算。
当须要在数据变动时执行异步或开销较大的操作时，应该应用 watch，应用 watch 选项容许执行异步操作 (拜访一个 API)，限度执行该操作的频率，并在失去最终后果前，设置中间状态。这些都是计算属性无奈做到的。

这个 API 很少用到，作用是扩大组件生成一个结构器，通常会与 $mount 一起应用。

// 创立组件结构器
let Component = Vue.extend({template: "<div>test</div>"});
// 挂载到 #app 上 new Component().$mount('#app')
// 除了下面的形式，还能够用来扩大已有的组件
let SuperComponent = Vue.extend(Component);
new SuperComponent({created() {console.log(1);
  },
});
new SuperComponent().$mount("#app");

工夫复杂度： 个树的齐全 diff 算法是一个工夫复杂度为 O(n*3），vue 进行优化转化成 O(n)。

了解：

最小量更新， key 很重要。这个能够是这个节点的惟一标识，通知 diff 算法，在更改前后它们是同一个 DOM 节点
- 扩大 v-for 为什么要有 key，没有 key 会暴力复用，举例子的话轻易说一个比方挪动节点或者减少节点（批改 DOM），加 key 只会挪动缩小操作 DOM。
只有是同一个虚构节点才会进行精细化比拟，否则就是暴力删除旧的，插入新的。
只进行同层比拟，不会进行跨层比拟。

diff 算法的优化策略：四种命中查找，四个指针

旧前与新前（先比结尾，后插入和删除节点的这种状况）
旧后与新后（比结尾，前插入或删除的状况）
旧前与新后（头与尾比，此种产生了，波及挪动节点，那么新前指向的节点，挪动到旧后之后）
旧后与新前（尾与头比，此种产生了，波及挪动节点，那么新前指向的节点，挪动到旧前之前）

关于vue.js:如何准备好一场vue面试

对 SSR 的了解

Vue 的长处

computed 的实现原理

能说下 vue-router 中罕用的 hash 和 history 路由模式实现原理吗？

对 React 和 Vue 的了解，它们的异同

Vue 的生命周期办法有哪些个别在哪一步发申请

Vue 路由 hash 模式和 history 模式

什么是 MVVM？

谈谈 Vue 和 React 组件化的思维

Vue complier 实现

个别在哪个生命周期申请异步数据

vue3 中 watch、watchEffect 区别

Vue 模板编译原理

Vue 中的 key 到底有什么用？

computed 和 watch 的区别和使用的场景？

Vue 模版编译原理晓得吗，能简略说一下吗？

子组件能够间接扭转父组件的数据吗？

Computed 和 Watch 的区别

extend 有什么作用

diff 算法

Just My Socks（注册教程内含优惠码）

关于vue.js:如何准备好一场vue面试

对 SSR 的了解

Vue 的长处

computed 的实现原理

能说下 vue-router 中罕用的 hash 和 history 路由模式实现原理吗？

对 React 和 Vue 的了解，它们的异同

Vue 的生命周期办法有哪些 个别在哪一步发申请

Vue 路由 hash 模式和 history 模式

什么是 MVVM？

谈谈 Vue 和 React 组件化的思维

Vue complier 实现

个别在哪个生命周期申请异步数据

vue3 中 watch、watchEffect 区别

Vue 模板编译原理

Vue 中的 key 到底有什么用？

computed 和 watch 的区别和使用的场景？

Vue 模版编译原理晓得吗，能简略说一下吗？

子组件能够间接扭转父组件的数据吗？

Computed 和 Watch 的区别

extend 有什么作用

diff 算法

Just My Socks（注册教程 内含优惠码）

Vue 的生命周期办法有哪些个别在哪一步发申请

Just My Socks（注册教程内含优惠码）